AngularJS ng-click stopPropagation

Eu tenho um evento de clique em uma linha da tabela e nesta linha, há também um botão Excluir com um evento de clique. Quando clico no botão de exclusão, o evento de clique na linha também é triggersdo.

Aqui está o meu código.

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

Como posso evitar que o evento showUser seja acionado quando clico no botão Excluir na célula da tabela?

A diretiva ngClick (assim como todas as outras diretivas de evento) cria a variável $event , que está disponível no mesmo escopo. Essa variável é uma referência ao object de event JS e pode ser usada para chamar stopPropagation() :

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

PLUNKER

Uma adição à resposta de Stewie. No caso de o seu retorno de chamada decidir se a propagação deve ser interrompida ou não, achei útil passar o object $event para o retorno de chamada:

 

E, em seguida, no próprio retorno de chamada, você pode decidir se a propagação do evento deve ser interrompida:

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

Eu escrevi uma diretiva que permite limitar as áreas onde um clique tem efeito. Ele pode ser usado para certos cenários como este, então, em vez de ter que lidar com o clique caso a caso, você pode simplesmente dizer que “os cliques não sairão desse elemento”.

Você usaria assim:

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

Tenha em mente que isso impediria todos os cliques na última célula, não apenas no botão. Se não é isso que você quer, você pode querer quebrar o botão assim:

    

Aqui está o código da diretiva:

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

Caso você esteja usando uma diretiva como eu, é assim que funciona quando você precisa da binding de dois dados, por exemplo, após atualizar um atributo em qualquer modelo ou coleção:

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

Agora, você pode facilmente usá-lo em qualquer botão, link, div, etc. assim:

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