带有 angularJS 的表单上的空动作属性答案

【问题标题】：Empty action attribute on a form with angularJS带有 angularJS 的表单上的空动作属性
【发布时间】：2013-12-02 21:40:39
【问题描述】：

我正在尝试在 AngularJS 应用程序中以正常方式提交表单，但遇到了一个问题：我似乎必须指定 action 属性。

根据 HTML 规范 (http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm)：

如果 action 是空字符串，让 action 是文档的地址表单文档。

但是如果 action 属性没有填写，AngularJS 会拒绝提交表单。我发现的一种解决方法是使用 action="#" 但这不是一个可接受的解决方案，因为我可能会使用哈希并且我不希望它被重写。

有人遇到过这个问题吗？

编辑：我不想为这个表单使用 angular，我只想以“旧”方式提交它

【问题讨论】：

Angular.js submit form old way的可能重复

标签： html forms angularjs

【解决方案1】：

我创建了一个小指令来解决这个问题：

.directive('form', ['$location', function($location) {
    return {
        restrict:'E',
        priority: 999,
        compile: function() {
            return {
                pre: function(scope, element, attrs){
                    if (attrs.noaction === '') return;
                    if (attrs.action === undefined || attrs.action === ''){
                        attrs.action = $location.absUrl();
                    }
                }
            }
        }
    }
}]);

似乎对我有好处。它会查找 action 为空的表单，并将其设置为当前 url。

实际上，它并没有设置动作 - 它设置了 attr 值，所以实际的表单指令认为它有一个。

@Reimund 的

更新很好 - 实际上我也必须这样做。

新更新 - 我添加了将noaction 属性添加到表单元素的选项；这使您能够返回到“正常”的角度情况。否则，如果使用 ajax，该指令将提交两次表单。

【讨论】：

【解决方案2】：

在库中，您可以看到 Angular 在没有任何操作的情况下侦听表单的事件 submit：https://github.com/angular/angular.js/blob/b9fa5c5a6781f4e1ec337f27d55c69db491a6555/src/ng/directive/form.js#L331

你可以评论这行，它有效，但我反对编辑库的代码。

几行之后，您可以看到 Angular 正在侦听事件 $destroy 启用以删除对该事件的操作。

因此，为了避免修改 Angular，你可以只触发表单的这个事件：

angular.element(document).ready(function(){
    angular.element(document.querySelector("#loginForm")).triggerHandler("$destroy")‌; 
});

上面几行描述了这种行为的原因：

我们不能使用 jq 事件，因为如果表单在提交期间被破坏，默认操作不会被阻止。

【讨论】：

这是您发布的 sn-p 的 jqLite 版本： angular.element(document).ready(function(){ angular.element(document.querySelector("#loginForm")).triggerHandler ("$destroy"); });

【解决方案3】：

您可以使用ng-submit。

表格

<form name="test" action="" ng-submit="submit()">
  What's your name? <input ng-model="name" /><br />
  <button>Send</button>
</form>
<br />
My name is: {{name}}

var app = angular.module('App', []);
app.controller('AppCtrl', function($scope) {
  $scope.submit = function() {
    $scope.name = $scope.name + ' Doe';
  }
});

Plunkerhttp://plnkr.co/edit/rqAwxWmozrzwwj4oAU5k?p=preview

【讨论】：

【解决方案4】：

通常我只是用 ng-click 处理程序制作按钮。

 <button ng-click="Generate()">Submit</button><br>

【讨论】：