Angular ng-submit调用了两次

Question

所以,我有一个角度形式,其提交方法被击中两次,我无法弄清楚为什么.我对Angular很新,所以我可能会忽略一些相当简单的事情......

HTML:

<div ng-app="RegistrationApp" ng-controller="RegistrationController">
    <form name="accountForm" ng-submit="submitAccount($event, accountForm, account)"  novalidate>

        // inputs here...

        <button type="submit" class="btn btn-success pull-right" ng-disabled="accountForm.$invalid">Submit</button>
    </form>
</div>

JS:

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

RegistrationApp.controller('RegistrationController', function ($scope) {

    $scope.submitAccount = function (evt, form, account) {
        console.log('submitAccount() hit'); 
        console.log(evt);
        console.log(form);

        evt.stopPropagation();

        // AJAX code
    });
});

控制台窗口:

submitAccount() hit 
o.Event {originalEvent: Event, type: "submit", isDefaultPrevented: function, timeStamp: 1394139847226, jQuery210012237170152366161: true…}
c {$error: Object, $name: "accountForm", $dirty: true, $pristine: false, $valid: true…}

submitAccount() hit 
o.Event {originalEvent: Event, type: "submit", isDefaultPrevented: function, timeStamp: 1394139847226, jQuery210012237170152366161: true…}
Constructor {$error: Object, $name: "accountForm", $dirty: true, $pristine: false, $valid: true…}

所以,我尝试的第一件事就是停止传播事件,但这并没有任何实际效果.在浏览事件对象后,它们看起来完全相同.唯一不同的是'形式'对象.属性是相同的,除了一个显示"c",另一个显示"构造函数".

什么可能导致这个触发两次？在两种情况下,事件目标都设置为表单元素,并且我没有使用任何onclick函数或表单中的任何其他类型的事件.

Answer 1

发生这种情况的另一个原因(刚发生在我身上):

我有以下内容:

<form ng-submit="myCtrl.search()">
   <button type="submit">Search</button>
   <button type="submit" class="mobile-only" ng-click="myCtrl.search()">Go</button>
</form>

我在表单中有另一个按钮,该按钮ng-submit与其上的相同功能绑定,ng-click导致该方法被调用两次.

Answer 2

检查您没有两次声明控制器:一个在HTML中,如上所示,另一个在配置路由时.如果是这种情况,则控制器会实例化两次,因此会调用两次侦听器

Answer 3

这种行为有多种原因(其中一些已经注意到):

• 声明控制器两次(检查路由,html标头,容器html(如果有).
• 命名函数提交(即使我无法重现它).
• 如果已经在ng-submit表单上设置了ng-click功能,只需删除ng-click即可.单击提交按钮或按输入键将自行调用ng-submit功能.

仔细检查它们,因为在某些情况下很容易通过它们

Answer 4

发生在我身上的一个原因,我不确定这是否会发生在任何其他:)

在我的控制器中,我有:

$scope.submit = function() { someThingHere };

在视图中

<form ng-submit="submit()">
</form>

这种形式已经"神秘地"提交了两次,以解决我不得不重命名$scope.submit为别的东西.