AngularJS ng-click wird zweimal ausgelöst

Ich hatte ein ähnliches Problem, konnte aber nicht finden, wo ich Angular zweimal in meine Dateien aufgenommen habe.

Ich habe ajax-Aufrufe verwendet, um bestimmte Formularlayouts zu laden. Daher muss ich $compile verwenden, um Angular für das eingefügte DOM zu aktivieren. Ich habe jedoch $compile in meiner Direktive $element verwendet, an die ein Controller angeschlossen ist. Stellt sich heraus, dass dies den Controller "einschließt", führt dies zu zwei Triggern mit ng-click oder ng-submit. 

Ich habe dies behoben, indem ich $compile direkt im eingefügten DOM anstelle meiner Direktive $element verwende.

Dies ist wahrscheinlich unklar, aber ich hatte ng-click zweimal geschossen, weil BrowserSync ausgeführt wurde, was meine Eingaben in einem Tab spiegelte, den ich in einem anderen Fenster geöffnet hatte, wodurch alle Klicks verdoppelt wurden. Zur Lösung habe ich "ghostMode" deaktiviert: https://www.browsersync.io/docs/options/

Gleiches Problem mit 

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

fn wurde zweimal gerufen

Mit einem Knopf fixiert: 

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

Ich habe dieses Problem gelöst, indem ich meinen Ngsubmit-Handler entfernt habe, da ich keinen Bedarf dafür habe. Ich überwache Änderungsereignisse und verwende SignalR, um den Bildschirm nahezu in Echtzeit zu aktualisieren. 

Ich war auch in einem Formular und die AngularJS-Dokumente für ngSubmit besagt:

Warnung: Achten Sie darauf, dass Sie nicht die doppelte Übergabe verursachen, indem Sie die ngClick- und ngSubmit-Handler zusammen verwenden. In der Dokumentation der Form Direktive finden Sie eine ausführliche Beschreibung, wann ngSubmit ausgelöst werden kann.

Falls jemand dasselbe Problem hat: Dies war mein Problem:

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

Sowohl der type="submit" als auch die ng-click="login()" haben die login () - Methode in meinem Controller ausgelöst.

Verwenden Sie also entweder die type = submit- oder die ng-click-Direktive

Wenn andere Antworten nicht helfen, stellen Sie sicher, dass die AngularJS-Profilerstellung in Batarang deaktiviert ist (sofern Sie dies natürlich installiert haben).

Dies machte ng-click, um zweimal für mich zu schießen.

elemente umschlossenen Elemente, und dies kann zwei oder mehr Auslöserereignisse verursachen. 

Also habe ich einen einfachen CSS-Trick für diese Lösung verwendet:

.off{
   pointer-events:none;
}

und wenden Sie es auf ein Element an, das dem Click-Ereignis entspricht.

Ich habe es bekommen, als ich aus Versehen mehrmals im Zyklus $ compile für die dynamisch hinzugefügten Elemente aufgerufen habe, als nur einmal. Beim Kompilieren wurde dieser Effekt nur einmal entfernt.

stand vor demselben Problem. Stellen Sie fest, dass sie https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js verwendet haben und ich auf die neueste Version 1.4.5 und die aktuelle Version umstelle gerade gearbeitet.

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>

Sie haben möglicherweise einen Ng-Klick in einen Formularcontainer, indem Sie einen Ng-Submit verwenden. Fügen Sie in diesem Fall alle mit ng-click typ = "button" hinzu.

Ich habe <button ng-click = 'clickHandler ()'> in <a ng-click='clickHandler()'> geändert. Jetzt wird das Ereignis nur noch einmal ausgelöst

Diese Situation kann durch das Fehlen des ngTouch in Angular verursacht werden.

Ereignis Wenn das ngTouch geladen ist, können die Dateien bug in ngTouch und ngClick vor Angular 1.5.0 auftreten. Dies ist darauf zurückzuführen, dass ngClick in Chrome für Desktop auf der Gerätesymbolleiste oder auf dem mobilen Gerät von pointerup und mouseUp ausgelöst wird.

Ich hatte das gleiche Problem, als ich dynamisch Teilansichten in mein SPA (Single Page Applications) einfügte. Die Art und Weise, wie ich es gelöst habe, bestand darin, den Inhalt meines div in einer lokalen Variablen wie dieser zu speichern:

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

Dann leeren Sie das div und setzen Sie den Inhalt wie folgt zurück:

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

Jetzt können Sie weitere HTML-Dateien hinzufügen, die Sie von einem AJAX -Aufruf erhalten haben oder dynamisch erstellt wurden. Vergessen Sie nicht, Ihren HTML-Code neu zu kompilieren, um ihn an eckig zu binden:

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

Ich bin ein bisschen ein Dummy und hatte folgendes:

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

Das Klickereignis wurde zweimal ausgelöst. Ich habe den NG-Klick auf das Label-Element verschoben und es funktioniert wie erwartet.

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

Ich hatte auch so ein Problem. 

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

So rufen Sie ng-click nicht auf, aber es wurden keine Fehler ausgegeben und die Funktionsaufrufe funktionierten trotzdem.

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

Ist korrekt und wird dann nur einmal aufgerufen.

Ich weiß nicht, warum dies der Fall war, aber ich musste event.stopPropagation(); in meiner JavaScript-Funktion verwenden.

HTML

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

JAVASCRIPT 

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