AngularJS ng-click срабатывает дважды

Ответ 1

Код, который вы предоставили, не запускает событие дважды:

http://jsfiddle.net/kNL6E/ (нажмите Save)

Возможно, вы включили Angular дважды? Если вы это сделаете, вы получите два предупреждения, показанные здесь:

http://jsfiddle.net/kNL6E/1/

Ответ 2

У меня была похожая проблема, но я не смог найти, где я дважды включил Angular в свои файлы.

Я использовал вызовы ajax для загрузки определенных макетов форм, поэтому мне нужно использовать $compile для активации Angular на вставленном DOM. Однако я использовал $compile в моей директиве $element, к которой подключен контроллер. Оказывается, это "включает" контроллер дважды, вызывая два триггера с ng-click или ng-submit.

Я исправил это, используя $compile непосредственно на вставленном DOM вместо моей директивы $element.

Ответ 3

Такая же проблема с использованием

<a ng-click="fn()"></a>

fn вызывается дважды

С помощью кнопки исправлено:

<button ng-click="fn()"></button>

Ответ 4

Это, вероятно, неясно, но у меня была стрелка ng-click, потому что у меня был запуск BrowserSync, который отражал бы мои входы на вкладке, которую я открывал в другом окне, тем самым удваивая все мои клики. Чтобы решить проблему, я отключил "ghostMode": https://www.browsersync.io/docs/options/

Ответ 5

Я решил это, удалив обработчик ngsubmit, поскольку мне это не нужно. Я отслеживаю события изменений и использую SignalR для обновления экрана почти в режиме реального времени.

Я тоже был в форме, а Документы AngularJS для ngSubmit:

Предупреждение. Будьте осторожны, чтобы не вызывать "двойное подчинение", используя вместе с обработчиками ngClick и ngSubmit. См. Формулу директивная документация для подробного обсуждения того, когда ngSubmit может быть запущено.

Ответ 6

Если кто-то имеет такую ​​же проблему: Это была моя проблема:

<a type="submit" ng-click="login()">submit login<a>

Оба, type="submit" и ng-click="login()" вызвали метод login() в моем контроллере.

Поэтому просто используйте директиву type = submit или ng-click

Ответ 7

Если другие ответы не помогают, убедитесь, что профилирование AngularJS отключено в Batarang (если вы его установили, конечно).

Это сделало ng-click для запуска дважды для меня.

Ответ 8

элементы обернуты друг на друга, и это может вызвать триггерное событие дважды или более.

Итак, я использовал простой трюк CSS для этого решения:

.off{
   pointer-events:none;
}

и применить его к элементу, соответствующему событию click.

Ответ 9

Я получил его, когда я случайно вызвал $compile для динамически добавленных элементов несколько раз в цикле, а не только один раз. Компиляция только однажды удалила этот эффект.

Ответ 10

столкнулся с такой же проблемой. Узнайте, что они использовали https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js, и я переключил его на последнюю версию 1.4.5, и она просто сработала.

https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js

var app = angular.module('regApp', []);

app.controller('RegistrationCtrl', ['$scope','$http',function($scope,$http ) {
  $scope.PostRegistration = function() {
    alert('click '); // <--- fires twice
    /// some code here -- 
  };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="regApp" ng-controller="RegistrationCtrl">
  <h2 >Registration for {{data.EventName}}</h2>
  <span ng-click="PostRegistration()" class="btn" id="btnSave">Save </span>

</div>

Ответ 11

Я изменил < button ng-click = 'clickHandler()' > на < ng-click = 'clickHandler()' > и теперь событие срабатывает только один раз

Ответ 12

У вас может быть ng-щелчок внутри контейнера формы с помощью ng-submit. В этом случае добавьте type = "button" для всех ваших, используя ng-click.

Ответ 13

У меня была такая же проблема при динамическом введении частичных представлений в моем SPA (Single Pages Applications). Как я решил, это было сохранить содержимое моего div в локальной переменной следующим образом:

var html = $("#leftContainer").html();

Затем выпустите div и reset его содержимое следующим образом:

$("#leftContainer").empty();
$("#leftContainer").append(html);

Теперь вы можете добавить любой дополнительный html, который вы получили от вызова AJAX или динамически сконструировали, и, наконец, помните, что нужно перекомпилировать HTML-код, чтобы связать его с angular:

var entities = $("#entitiesContainer");

var entity = "<div><a href='#' ng-click='Left(" + entityId + ")'>&nbsp;" + entityName + "</a><div>"
entities.append(entity);

var leftContainer = angular.element(document.getElementById("entitiesContainer"));

$compile(leftContainer)($scope);

Ответ 14

Я немного фиктивный и имел это:

<li data-shape="amethyst" ng-click="toggleGem('amethyst')">
    <label></label>
    <i class="amethyst"></i>Amethyst
    <input type="checkbox" name="gem_type" id="gem-amethyst" value="amethyst" />
</li>

Событие click запускалось дважды. Я переместил ng-click в элемент label и работал как ожидалось.

<li data-shape="amethyst">
    <label ng-click="toggleGem('amethyst')"></label>
    <i class="amethyst"></i>Amethyst
    <input type="checkbox" name="gem_type" id="gem-amethyst" value="amethyst" />
</li>

Ответ 15

Эта ситуация может быть вызвана отсутствием ngTouch в Angular.

Событие, если загружено ngTouch, ошибка в ngTouch и ngClick до Angular 1.5.0. Это связано с тем, что ngClick запускается pointerup и mouseUp в Chrome для рабочего стола на панели инструментов устройства или на мобильном устройстве.

Ответ 16

У меня тоже была проблема.

<button style="width: 100%;" class="btn btn-danger" ng-click="'{{vm.delete()}}'">

Это не то, как вы вызываете ng-click, но никаких ошибок не было, и функции вызова все еще работают.

<button style="width: 100%;" class="btn btn-danger" ng-click="vm.delete()">

Правильно, и он будет вызываться только один раз.

Ответ 17

Я не знаю, в чем причина этого, но мне пришлось использовать event.stopPropagation(); внутреннюю мою функцию JavaScript.

HTML

<button class="button" ng-click="save($event)">Save</button>

JAVASCRIPT

function save(event) {
    event.stopPropagation();
}

Ответ 18

Я обработал это следующим кодом

HTML:

<div>
    <ui>
        <li>
            <button class="Button" ng-disabled="self.desableSubmitButton" ng- 
            click="self.SubmitClick($event)">Submit</button>
        </li>
    </ui> 
</div>

Angular 1.0 Controller:

_self.SubmitClick = function(event){   
     _self.desableSubmitButton = true; //disable submit button
     event.preventDefault();
     event.stopPropagation();

     setTimeout(funtion() {
       _self.desableSubmitButton = false; //enable submit button after timeout
           if(_self.$scope.$$phase != '$apply' || _self.$scope.$$phase != '$digest'){
             _self.$scope.$digest();
             }
      }, 1000);//other Code logic
}