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

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

Answer 2

发生这种情况的另一个原因（刚好发生在我身上）：

我有以下内容：

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

有一个原因发生在我身上，我不确定这是否会发生在其他任何事情上：）

在我的控制器里，我有：

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

在视图中

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

这种形式已经提交了＃34;神秘地＆＃34;两次，要解决我必须将$scope.submit重命名为其他内容。

Answer 4

此类行为有多个原因（其中一些已经注明）：

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

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

Answer 5

在我的情况下，这是“ ng-app”指令，在我手动引导所有内容时，我并没有依赖它。

Angular ng-submit调用了两次

5 个答案: