Угловой ng-submit вызывается дважды

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

12
angularjs javascript javascript-events ng-submit

4 ответов

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

10

еще одна причина этого происходящего (что только что произошло со мной):

у меня было следующее:

<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 что заставляло метод вызываться дважды.

11

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

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

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

По мнению

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

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

5

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

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

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

5