AngularJS ng-click stopPropagation

Tengo un evento de clic en una fila de la tabla y en esta fila también hay un botón Eliminar con un evento de clic. Cuando hago clic en el botón Eliminar, también se activa el evento de clic en la fila.

Aquí está mi código.

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

¿Cómo puedo evitar que showUserse active el evento cuando hago clic en el botón Eliminar en la celda de la tabla?

La directiva ngClick (así como todas las demás directivas de eventos) crea una $eventvariable que está disponible en el mismo ámbito. Esta variable es una referencia al eventobjeto JS y se puede usar para llamar 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

Una adición a la respuesta de Stewie. En caso de que su devolución de llamada decida si la propagación se debe detener o no, me pareció útil pasar el $eventobjeto a la devolución de llamada:

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

Y luego, en la devolución de llamada, puede decidir si se debe detener la propagación del evento:

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

Escribí una directiva que le permite limitar las áreas donde un clic tiene efecto. Podría usarse para ciertos escenarios como este, por lo que en lugar de tener que lidiar con el clic caso por caso, puede decir "los clics no saldrán de este elemento".

Lo usarías así:

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

Tenga en cuenta que esto evitaría todos los clics en la última celda, no solo el botón. Si eso no es lo que desea, puede ajustar el botón de esta manera:

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

Aquí está el código de la directiva:

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

En caso de que esté utilizando una directiva como yo, así es como funciona cuando necesita el enlace de dos vías de datos, por ejemplo, después de actualizar un atributo en cualquier modelo o colección:

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

Ahora, puede usarlo fácilmente en cualquier botón, enlace, div, etc., así:

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