¿Cuál es la mejor manera de cancelar la propagación de eventos entre llamadas ng-click anidadas?

Aquí hay un ejemplo. Digamos que quiero tener una superposición de imágenes como muchos sitios. Por lo tanto, cuando hace clic en una miniatura, aparece una superposición negra sobre toda la ventana y se centra una versión más grande de la imagen. Al hacer clic en la superposición negra, se descarta; Al hacer clic en la imagen, se llamará a una función que muestra la siguiente imagen.

El html:

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

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

El problema es que con esta configuración, si hace clic en la imagen, tanto nextImage()y hideOverlay()recibe una llamada. Pero lo que quiero es que solo nextImage()se me llame.

Sé que puedes capturar y cancelar el evento en la nextImage()función de esta manera:

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

... Pero quiero saber si hay una mejor manera de hacerlo de AngularJS que no requiera que prefije todas las funciones de los elementos dentro de la superposición con este fragmento.

Lo que dijo @JosephSilber, o pasar el objeto $ event a la ng-clickdevolución de llamada y detener la propagación dentro de él:

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

Uso $event.stopPropagation():

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

Aquí hay una demostración: http://plnkr.co/edit/3Pp3NFbGxy30srl8OBmQ?p=preview

Me gusta la idea de usar una directiva para esto:

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

Luego use la directiva como:

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

Si lo desea, puede hacer que esta solución sea más genérica como esta respuesta a una pregunta diferente: https://stackoverflow.com/a/14547223/347216

A veces, puede tener más sentido hacer esto:

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

Elegí hacerlo de esta manera porque no quería myClickHandler()detener la propagación del evento en los muchos otros lugares donde se usaba.

Claro, yo podría haber añadido un parámetro booleano a la función de controlador, pero stopPropagation()es mucho más significativo que simplemente true.

Esto funciona para mi:

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

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

Si no desea tener que agregar la detención de propagación a todos los enlaces, esto también funciona. Un poco más escalable.

$scope.hideOverlay( $event ){

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

}

Si inserta ng-click = "$ event.stopPropagation" en el elemento principal de su plantilla, se detendrá stopPropogation a medida que burbujea en el árbol, por lo que solo tiene que escribirlo una vez para toda la plantilla.

Puede registrar otra directiva además de la ng-clickcual modifica el comportamiento predeterminado ng-clicky detiene la propagación del evento. De esta manera no tendría que agregar $event.stopPropagationa mano.

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 del controlador IN

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