javascript Angular ng-submit 被调用两次
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22236102/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular ng-submit called twice
提问by Logan Black
So, I have an angular form whose submit method is being hit twice, and I can't figure out why. I'm pretty new to Angular, so it's possible I'm overlooking something fairly simple...
所以，我有一个 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:
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
});
});
Console Window:
控制台窗口：
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…}
So, the first thing I tried was to stop propogating the event, but that doesnt have any real effect. After going through the event objects, they're seem identical. The only thing that differs is the 'form' object. The properties are the same, except that one shows that "c" and the other shows "Constructor".
所以，我尝试的第一件事是停止传播事件，但这并没有任何实际效果。通过事件对象后，它们看起来是相同的。唯一不同的是“表单”对象。属性相同，只是一个显示“c”，另一个显示“构造函数”。
Any ideas what could be causing this to trigger twice?? The event target is set to the form element in both cases, and I'm not using any onclick functions, or any other sorts of events in the form.
任何想法可能导致此触发两次？在这两种情况下，事件目标都设置为表单元素，我没有使用任何 onclick 函数或表单中的任何其他类型的事件。
采纳答案by Pascal Le Merrer
Check you didn't declare your controller twice: one in the HTML, as I can see above, and another when configuring your routes. If it's the case, the controller is instanciated twice, so the listener is invoked twice
检查您没有两次声明控制器：一次在 HTML 中，正如我在上面看到的，另一次在配置路由时。如果是这种情况，控制器被实例化两次，因此监听器被调用两次
回答by sma
Another reason for this occurring (which just happened to me):
发生这种情况的另一个原因（刚刚发生在我身上）：
I had the following:
我有以下几点：
<form ng-submit="myCtrl.search()">
<button type="submit">Search</button>
<button type="submit" class="mobile-only" ng-click="myCtrl.search()">Go</button>
</form>
I had another button inside the form that was bound to the same function as the ng-submiton its ng-clickwhich was causing the method to be called twice.
我在表单中有另一个按钮，该按钮绑定到ng-submit与其上的相同的功能，ng-click这导致该方法被调用两次。
回答by Leo Armentano
There are multiple causesfor such behaivour (some of them noted already):
这种行为有多种原因（其中一些已经指出）：
- Declaring the controller twice (Check routes, html header, container html (if there is one).
- Naming a function submit (Even if i could not reproduce it).
- Set a ng-click function on the submit button when you have it alreadyon the form ng-submit, just remove the ng-click. Clicking on the submit button or pressing enter on a input will call the ng-submit function by itself.
- 两次声明控制器（检查路由、html 标头、容器 html（如果有）。
- 命名函数提交（即使我无法重现它）。
- 当您在表单 ng-submit 上已经有了它时，在提交按钮上设置一个 ng-click 功能，只需删除 ng-click。单击提交按钮或在输入上按回车键将自行调用 ng-submit 函数。
Double check them since it's easy to pass them by in some cases
仔细检查它们，因为在某些情况下很容易通过它们
回答by Walid Ammar
One reason happend to me, I'm not sure if this will happen to any other :)
一个原因发生在我身上，我不确定这是否会发生在其他任何人身上:)
In my controller I had:
在我的控制器中，我有：
$scope.submit = function() { someThingHere };
In the view
在视图中
<form ng-submit="submit()">
</form>
This way that form has been submitted "mysteriously" two times, to solve that I had to rename $scope.submitto something else.
通过这种方式，该表单已经“神秘地”提交了两次，以解决我不得不重命名$scope.submit为其他名称的问题。
回答by et3rnal
In my case, it was "ng-app" directive which I was not relying on as I manually bootstrap everything.
就我而言，它是“ng-app”指令，当我手动引导所有内容时，我并不依赖它。
