AngularJS ng-click stopPropagation

Ich habe ein Klickereignis in einer Tabellenzeile und in dieser Zeile gibt es auch eine Löschschaltfläche mit einem Klickereignis. Wenn ich auf die Schaltfläche Löschen klicke, wird auch das Klickereignis in der Zeile ausgelöst.

Hier ist mein Code.

<tbody>
  <tr ng-repeat="user in users" class="repeat-animation" ng-click="showUser(user, $index)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td>{{user.email}}</td>
    <td><button class="btn red btn-sm" ng-click="deleteUser(user.id, $index)">Delete</button></td>
  </tr>
</tbody>

Wie kann ich verhindern, dass das showUserEreignis ausgelöst wird, wenn ich in der Tabellenzelle auf die Schaltfläche Löschen klicke?

Die ngClick-Direktive (sowie alle anderen Ereignisanweisungen) erstellt eine $eventVariable, die im selben Bereich verfügbar ist. Diese Variable ist eine Referenz auf ein JS- eventObjekt und kann zum Aufrufen von stopPropagation(): verwendet werden.

<table>
  <tr ng-repeat="user in users" ng-click="showUser(user)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td>
      <button class="btn" ng-click="deleteUser(user.id, $index); $event.stopPropagation();">
        Delete
      </button>
    </td>              
  </tr>
</table>

PLUNKER

Eine Ergänzung zu Stewies Antwort. Falls Ihr Rückruf entscheidet, ob die Weitergabe gestoppt werden soll oder nicht, fand ich es nützlich, das $eventObjekt an den Rückruf zu übergeben:

<div ng-click="parentHandler($event)">
  <div ng-click="childHandler($event)">
  </div>
</div>

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

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

Ich habe eine Direktive geschrieben, mit der Sie die Bereiche einschränken können, in denen ein Klick Auswirkungen hat. Es könnte für bestimmte Szenarien wie dieses verwendet werden. Anstatt sich also von Fall zu Fall mit dem Klicken befassen zu müssen, können Sie einfach sagen, dass "Klicks nicht aus diesem Element herauskommen".

Sie würden es so verwenden:

<table>
  <tr ng-repeat="user in users" ng-click="showUser(user)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td isolate-click>
      <button class="btn" ng-click="deleteUser(user.id, $index);">
        Delete
      </button>
    </td>              
  </tr>
</table>

Beachten Sie, dass dadurch alle Klicks auf die letzte Zelle und nicht nur auf die Schaltfläche verhindert werden. Wenn Sie dies nicht möchten, können Sie den Button wie folgt umschließen:

<span isolate-click>
    <button class="btn" ng-click="deleteUser(user.id, $index);">
        Delete
    </button>
</span>

Hier ist der Code der Richtlinie:

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

Wenn Sie eine Direktive wie mich verwenden, funktioniert dies so, wenn Sie die Zwei-Daten-Bindung benötigen, z. B. nach dem Aktualisieren eines Attributs in einem Modell oder einer Sammlung:

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

function setSurveyInEditionMode() {
  return {
    restrict: 'A',
    link: function(scope, element, $attributes) {
      element.on('click', function(event){
        event.stopPropagation();
        // In order to work with stopPropagation and two data way binding
        // if you don't use scope.$apply in my case the model is not updated in the view when I click on the element that has my directive
        scope.$apply(function () {
          scope.mySurvey.inEditionMode = true;
          console.log('inside the directive')
        });
      });
    }
  }
}

Jetzt können Sie es einfach in jeder Schaltfläche, jedem Link, jedem Div usw. wie folgt verwenden:

<button set-survey-in-edition-mode >Edit survey</button>

<ul class="col col-double clearfix">
 <li class="col__item" ng-repeat="location in searchLocations">
   <label>
    <input type="checkbox" ng-click="onLocationSelectionClicked($event)" checklist-model="selectedAuctions.locations" checklist-value="location.code" checklist-change="auctionSelectionChanged()" id="{{location.code}}"> {{location.displayName}}
   </label>



$scope.onLocationSelectionClicked = function($event) {
      if($scope.limitSelectionCountTo &&         $scope.selectedAuctions.locations.length == $scope.limitSelectionCountTo) {
         $event.currentTarget.checked=false;
      }
   };