Angular ng-submit вызывается дважды

Итак, у меня есть форма 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 или любые другие типы событий в форме.

Ответы

Ответ 1

Убедитесь, что вы дважды не указали свой контроллер: один в HTML, как я вижу выше, а другой - при настройке ваших маршрутов. Если это так, контроллер запускается дважды, поэтому слушатель дважды вызывается

Ответ 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, которая вызывала вызов метода дважды.

Ответ 3

Одна причина для меня, я не уверен, что это случится с любым другим:)

В моем контроллере у меня было:

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

В представлении

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

Таким образом, эта форма была представлена "таинственно" два раза, чтобы решить, что мне пришлось переименовать $scope.submit в нечто другое.

Ответ 4

Для такого behaivour (несколько из них уже отмечено) существует несколько причин:

Объявление контроллера дважды (проверьте маршруты, html-заголовок, контейнер html (если есть).
Именование функции submit (Даже если я не смог воспроизвести ее).
Задайте функцию ng-click в кнопке отправки, когда у вас есть уже в форме ng-submit, просто удалите ng-click. Нажатие на кнопку отправки или нажатие на вход вызовет функцию ng-submit самостоятельно.

Двойная проверка их, поскольку в некоторых случаях их легко передать.