Untitled

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <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>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
 <p>
  Form with directive:
  <br/>
  <tw-form tw-controller="ShopType" tw-action="AddShopType" method="post" target="_blank" enctype="multipart/form-data">
  <input type="file" id="shopTypeDllFile" name="shopTypeDllFile">
  <button type="submit" class="btn btn-primary ng-scope"> <i class="fa fa-plus"></i> Load...</button>
  </tw-form>
 </p>
Form without directive:
<br/>
<form action="api/ShopType/AddShopType" tw-controller="ShopType" tw-action="AddShopType" method="post" target="_blank" enctype="multipart/form-data">
  <input type="file" id="shopTypeDllFile" name="shopTypeDllFile">
  <button type="submit" class="btn btn-primary ng-scope"> <i class="fa fa-plus"></i> Load...</button>
</form>
</body>
</html>

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

app.directive('twForm', function() {
return {
restrict: 'E',
template: '<form ng-transclude></form>',
replace: true,
transclude: true,
scope: {
  twController: "@twController",
  twAction: "@twAction",
},
compile: function compile(tElement, tAttrs) {
  return function(scope, iElement, iAttrs) {
    var formTag = iElement;
    var encType = formTag.attr('enctype');
    if (encType === 'multipart/form-data') {
      // dont handle multipart as Ajax.
      formTag.attr('action', 'api/' + scope.twController + '/' + scope.twAction);
      formTag.removeAttr('ng-transclude');
    } else {
      //ajax form...
      formTag.on('submit', function(ev) {
        var url = 'api/' + scope.twController + '/' + scope.twAction;

        var method = formTag.attr('method');
        if (method == undefined)
          method = "GET";
        var successFunc = scope.twSuccess;
        var failFunc = scope.twFail;
        formTag.addClass('grayed-out');
        //formTag.find('input').attr('disabled', true);
        var p = $.ajax({
          method: method,
          url: url,
          data: formTag.serialize(),
          contentType: 'application/x-www-form-urlencoded; charset=utf-8',
          processData: true,
          jsonp: false
        });

        if (successFunc != undefined)
          p.done(function(res) {
            formTag.removeClass('grayed-out');
            successFunc({
              res: res
            });
          });
        if (failFunc != undefined)
          p.fail(function(res) {
            formTag.removeClass('grayed-out');
            failFunc({
              res: res
            });
          });

        event.preventDefault(); // dont submit the usual way.
      });
    }
  };
}
}
});