AngularJS ng-click stopPropagation

Question

Ich habe ein Klick-Ereignis auf einer Tabellenzeile und in dieser Zeile gibt es auch einen Löschen-Button mit einem Klick-Ereignis. Wenn ich auf den Löschen-Button klicke, wird auch das Klick-Ereignis auf der Zeile ausgelöst.

Hier ist mein Code.

    {{user.firstname}}
    {{user.lastname}}
    {{user.email}}
    Löschen

Wie kann ich verhindern, dass das showUser-Ereignis ausgelöst wird, wenn ich auf den Löschen-Button in der Tabellenzelle klicke?

Answer 1

Die ngClick-Direktive (sowie alle anderen Event-Direktiven) erstellt eine $event-Variable, die im selben Scope verfügbar ist. Diese Variable ist ein Verweis auf das JS event-Objekt und kann verwendet werden, um stopPropagation() aufzurufen:

    {{user.firstname}}
    {{user.lastname}}

        Löschen

<a href="http://plnkr.co/edit/tTgu6LJkoVVahMMtHokt?p=preview">PLUNKER</a>

Answer 2

Eine Ergänzung zu Stewies Antwort. Falls Ihr Rückruf entscheidet, ob die Propagation gestoppt werden soll oder nicht, habe ich es als nützlich empfunden, das $event Objekt an den Rückruf zu übergeben:

Und dann im Rückruf selbst können Sie entscheiden, ob die Propagation des Ereignisses gestoppt werden soll:

$scope.childHandler = function ($event) {
  if (wanna_stop_it()) {
    $event.stopPropagation();
  }
  ...
};

Answer 3

Ich habe eine Direktive geschrieben, die es Ihnen ermöglicht, die Bereiche einzuschränken, in denen ein Klick wirksam ist. Es könnte für bestimmte Szenarien wie dieses verwendet werden, so dass Sie anstatt jeden Fall einzeln zu behandeln einfach sagen können "Klicks kommen nicht aus diesem Element heraus".

Sie würden es so verwenden:

    {{user.firstname}}
    {{user.lastname}}

        Löschen

Denken Sie daran, dass dies alle Klicks auf der letzten Zelle verhindern würde, nicht nur auf den Button. Wenn das nicht das ist, was Sie wollen, könnten Sie den Button so einpacken:

        Löschen

Hier ist der Code der Direktive:

angular.module('awesome', []).directive('isolateClick', function() {
    return {
        link: function(scope, elem) {
            elem.on('click', function(e){
                e.stopPropagation();
            });
        }
   };
});

Answer 4

Falls Sie wie ich eine Direktive verwenden, funktioniert es so, wenn Sie das bidirektionale Binden von Daten benötigen, zum Beispiel nachdem Sie ein Attribut in einem beliebigen Modell oder einer beliebigen Sammlung aktualisiert haben:

angular.module('yourApp').directive('setSurveyInEditionMode', setSurveyInEditionMode)

function setSurveyInEditionMode() {
  return {
    restrict: 'A',
    link: function(scope, element, $attributes) {
      element.on('click', function(event){
        event.stopPropagation();
        // Um mit stopPropagation und bidirektionalem Binden von Daten zu arbeiten
        // wenn Sie in meinem Fall kein scope.$apply verwenden, wird das Modell in der Ansicht nicht aktualisiert, wenn ich auf das Element klicke, das meine Direktive hat
        scope.$apply(function () {
          scope.mySurvey.inEditionMode = true;
          console.log('innerhalb der Direktive')
        });
      });
    }
  }
}

Jetzt können Sie es ganz einfach in beliebigen Schaltflächen, Links, Divs usw. verwenden, wie hier:

Umfrage bearbeiten