javascript - Angular ng-submit 调用了两次

Question

我有一个 Angular 表单，它的提交方法被点击了两次，但我不明白为什么。我是 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”，另一个显示“Constructor”。

任何想法可能导致它触发两次？在这两种情况下，事件目标都设置为表单元素，我没有使用任何 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>

我在表单内有另一个按钮，它绑定(bind)到与其 ng-click 上的 ng-submit 相同的函数，这导致该方法被调用两次.