SHARE
TWEET

Untitled

a guest Oct 12th, 2017 53 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html ng-app="plunker">
  3.  
  4. <head>
  5.   <meta charset="utf-8" />
  6.   <title>AngularJS Plunker</title>
  7.   <script>
  8.     document.write('<base href="' + document.location + '" />');
  9.   </script>
  10.   <link rel="stylesheet" href="style.css" />
  11.   <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
  12.   <script src="app.js"></script>
  13. </head>
  14.  
  15. <body ng-controller="MainCtrl">
  16.  <p>
  17.   Form with directive:
  18.   <br/>
  19.   <tw-form tw-controller="ShopType" tw-action="AddShopType" method="post" target="_blank" enctype="multipart/form-data">
  20.   <input type="file" id="shopTypeDllFile" name="shopTypeDllFile">
  21.   <button type="submit" class="btn btn-primary ng-scope"> <i class="fa fa-plus"></i> Load...</button>
  22.   </tw-form>
  23.  </p>
  24. Form without directive:
  25. <br/>
  26. <form action="api/ShopType/AddShopType" tw-controller="ShopType" tw-action="AddShopType" method="post" target="_blank" enctype="multipart/form-data">
  27.   <input type="file" id="shopTypeDllFile" name="shopTypeDllFile">
  28.   <button type="submit" class="btn btn-primary ng-scope"> <i class="fa fa-plus"></i> Load...</button>
  29. </form>
  30. </body>
  31. </html>
  32.    
  33. var app = angular.module('plunker', []);
  34.  
  35. app.controller('MainCtrl', function($scope) {
  36.   $scope.name = 'World';
  37. });
  38.  
  39. app.directive('twForm', function() {
  40. return {
  41. restrict: 'E',
  42. template: '<form ng-transclude></form>',
  43. replace: true,
  44. transclude: true,
  45. scope: {
  46.   twController: "@twController",
  47.   twAction: "@twAction",
  48. },
  49. compile: function compile(tElement, tAttrs) {
  50.   return function(scope, iElement, iAttrs) {
  51.     var formTag = iElement;
  52.     var encType = formTag.attr('enctype');
  53.     if (encType === 'multipart/form-data') {
  54.       // dont handle multipart as Ajax.
  55.       formTag.attr('action', 'api/' + scope.twController + '/' + scope.twAction);
  56.       formTag.removeAttr('ng-transclude');
  57.     } else {
  58.       //ajax form...
  59.       formTag.on('submit', function(ev) {
  60.         var url = 'api/' + scope.twController + '/' + scope.twAction;
  61.  
  62.         var method = formTag.attr('method');
  63.         if (method == undefined)
  64.           method = "GET";
  65.         var successFunc = scope.twSuccess;
  66.         var failFunc = scope.twFail;
  67.         formTag.addClass('grayed-out');
  68.         //formTag.find('input').attr('disabled', true);
  69.         var p = $.ajax({
  70.           method: method,
  71.           url: url,
  72.           data: formTag.serialize(),
  73.           contentType: 'application/x-www-form-urlencoded; charset=utf-8',
  74.           processData: true,
  75.           jsonp: false
  76.         });
  77.  
  78.         if (successFunc != undefined)
  79.           p.done(function(res) {
  80.             formTag.removeClass('grayed-out');
  81.             successFunc({
  82.               res: res
  83.             });
  84.           });
  85.         if (failFunc != undefined)
  86.           p.fail(function(res) {
  87.             formTag.removeClass('grayed-out');
  88.             failFunc({
  89.               res: res
  90.             });
  91.           });
  92.  
  93.         event.preventDefault(); // dont submit the usual way.
  94.       });
  95.     }
  96.   };
  97. }
  98. }
  99. });
RAW Paste Data
Top