Angular ng-submit called twice

问题:

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

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
    });
});

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".

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.

回答1:

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

回答2:

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-submit on its ng-click which was causing the method to be called twice.

回答3:

There are multiple causes for 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 already on 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.

Double check them since it's easy to pass them by in some cases

回答4:

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.submit to something else.

回答5:

In my case, it was "ng-app" directive which I was not relying on as I manually bootstrap everything.