AngularJS ng-click stopPropagation

Ho un evento Click su una riga della tabella e in questa riga c'è anche un pulsante Elimina con un evento Click. Quando faccio clic sul pulsante Elimina, viene attivato anche il clic Evento sulla riga.

Ecco il mio codice

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

Come posso evitare che l' showUserevento venga attivato quando faccio clic sul pulsante Elimina nella cella della tabella?

La direttiva ngClick (così come tutte le altre direttive sugli eventi) crea una $eventvariabile disponibile sullo stesso ambito. Questa variabile è un riferimento eventall'oggetto JS e può essere utilizzata per chiamare stopPropagation():

<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

Un'aggiunta alla risposta di Stewie. Nel caso in cui il callback decida se interrompere o meno la propagazione, ho trovato utile passare l' $eventoggetto al callback:

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

E quindi nel callback stesso, puoi decidere se interrompere la propagazione dell'evento:

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

Ho scritto una direttiva che ti consente di limitare le aree in cui un clic ha effetto. Potrebbe essere utilizzato per alcuni scenari come questo, quindi invece di dover gestire il clic caso per caso, puoi semplicemente dire "i clic non verranno fuori da questo elemento".

Lo useresti così:

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

Tieni presente che ciò impedirebbe tutti i clic sull'ultima cella, non solo il pulsante. Se non è quello che vuoi, potresti voler avvolgere il pulsante in questo modo:

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

Ecco il codice della direttiva:

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

Nel caso in cui si stia utilizzando una direttiva come me, è così che funziona quando è necessario il binding dei due dati, ad esempio dopo aver aggiornato un attributo in qualsiasi modello o raccolta:

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

Ora, puoi facilmente usarlo in qualsiasi pulsante, collegamento, div, ecc. In questo modo:

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