Question

我遇到了一种奇怪的行为，我无法理解。

我创建了一个指令'tw-form'，它将表单作为AJAX发布到我的API ...
当我尝试处理enctype='multipart/file-data'

的例外时

在这种情况下，我只填写action属性，并且不做更多。

我发现的是，表单根本没有提交！，

Plunker with minimal reproducible example https://plnkr.co/edit/x1HF8V8VfYO9KHfEP1Sy

编辑：also on JSFiddle https://jsfiddle.net/TomerW/dbuc16m2/

注意：如果我复制已编译的html并将其粘贴到表单上，则会提交。

测试：
谷歌浏览器版本61.0.3163.100（官方版本）（64位）

编辑：回答@floor：
我的目标是创建一个提交给我的WebService的表单

transclude用于保存表单的内容。

我使用jQuery构建ajax请求

ajax实际发送它。

谢谢，我将使用ng-submit而不是form.on（'Submit'，...）; 检查它是否有效

编辑：

的index.html

<!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>

app.js

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.
      });
    }
  };
}
}
});

感谢您的帮助。

从指令创建的表单标记不提交

的index.html

app.js

0 个答案: