Qual é a melhor maneira de cancelar a propagação de eventos entre chamadas ng-click aninhadas?

Aqui está um exemplo. Digamos que eu queira ter uma sobreposição de imagem como muitos sites. Portanto, quando você clica em uma miniatura, uma sobreposição preta aparece sobre toda a janela e uma versão maior da imagem é centralizada nela. Clicar na sobreposição preta a dispensa; clicar na imagem chama uma função que mostra a próxima imagem.

O html:

<div ng-controller="OverlayCtrl" class="overlay" ng-click="hideOverlay()">
    <img src="http://some_src" ng-click="nextImage()"/>
</div>

O javascript:

function OverlayCtrl($scope) {
    $scope.hideOverlay = function() {
        // Some code to hdie the overlay
    }
    $scope.nextImage = function() {
        // Some code to find and display the next image
    }
}

O problema é que, com esta configuração, se você clicar na imagem, tanto nextImage()e hideOverlay()são chamados. Mas o que eu quero é que apenas nextImage()seja chamado.

Eu sei que você pode capturar e cancelar o evento na nextImage()função assim:

if (window.event) {
    window.event.stopPropagation();
}

... Mas quero saber se existe uma maneira melhor de fazer o AngularJS que não exija que eu prefixe todas as funções nos elementos dentro da sobreposição com esse trecho.

O que o @JosephSilber disse, ou passe o objeto $ event para o ng-clickretorno de chamada e interrompa a propagação dentro dele:

<div ng-controller="OverlayCtrl" class="overlay" ng-click="hideOverlay()">
  <img src="http://some_src" ng-click="nextImage($event)"/>
</div>

$scope.nextImage = function($event) {
  $event.stopPropagation();
  // Some code to find and display the next image
}

Use $event.stopPropagation():

<div ng-controller="OverlayCtrl" class="overlay" ng-click="hideOverlay()">
    <img src="http://some_src" ng-click="nextImage(); $event.stopPropagation()" />
</div>

Aqui está uma demonstração: http://plnkr.co/edit/3Pp3NFbGxy30srl8OBmQ?p=preview

Eu gosto da ideia de usar uma diretiva para isso:

.directive('stopEvent', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            element.bind('click', function (e) {
                e.stopPropagation();
            });
        }
    };
 });

Em seguida, use a diretiva como:

<div ng-controller="OverlayCtrl" class="overlay" ng-click="hideOverlay()">
    <img src="http://some_src" ng-click="nextImage()" stop-event/>
</div>

Se você quiser, poderá tornar esta solução mais genérica como esta, para uma pergunta diferente: https://stackoverflow.com/a/14547223/347216

Às vezes, pode fazer mais sentido apenas fazer isso:

<widget ng-click="myClickHandler(); $event.stopPropagation()"/>

Eu escolhi fazê-lo dessa maneira, porque não queria myClickHandler()interromper a propagação de eventos nos muitos outros lugares em que ele era usado.

Claro, eu poderia ter adicionado um parâmetro booleano à função manipulador, mas stopPropagation()é muito mais significativo do que apenas true.

Isso funciona para mim:

<a href="" ng-click="doSomething($event)">Action</a>

this.doSomething = function($event) {
  $event.stopPropagation();
  $event.preventDefault();
};

Se você não deseja adicionar a interrupção da propagação a todos os links, isso também funciona. Um pouco mais escalável.

$scope.hideOverlay( $event ){

   // only hide the overlay if we click on the actual div
   if( $event.target.className.indexOf('overlay') ) 
      // hide overlay logic

}

Se você inserir ng-click = "$ event.stopPropagation" no elemento pai do seu modelo, o stopPropogation será capturado à medida que borbulha na árvore, portanto, você deve gravá-lo apenas uma vez para todo o modelo.

Você pode registrar outra diretiva em cima da ng-clickqual altera o comportamento padrão ng-clicke para a propagação de eventos. Dessa forma, você não precisaria adicionar $event.stopPropagationà mão.

app.directive('ngClick', function() {
    return {
        restrict: 'A',
        compile: function($element, attr) {
            return function(scope, element, attr) {
                element.on('click', function(event) {
                    event.stopPropagation();
                });
            };
        }
    }
});

<div ng-click="methodName(event)"></div>

Uso do controlador IN

$scope.methodName = function(event) { 
    event.stopPropagation();
}