Qual è il modo migliore per annullare la propagazione degli eventi tra chiamate ng-click nidificate?

Ecco un esempio Diciamo che voglio avere una sovrapposizione di immagini come molti siti. Quindi, quando fai clic su una miniatura, viene visualizzata una sovrapposizione nera su tutta la finestra e una versione più grande dell'immagine viene centrata in essa. Facendo clic sulla sovrapposizione nera la si chiude; facendo clic sull'immagine verrà chiamata una funzione che mostra l'immagine successiva.

Il codice HTML:

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

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

Il problema è che con questa configurazione, se si fa clic sull'immagine, entrambi nextImage()e hideOverlay()vengono chiamati. Ma quello che voglio è solo nextImage()per essere chiamato.

So che puoi catturare e cancellare l'evento nella nextImage()funzione in questo modo:

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

... Ma voglio sapere se esiste un modo migliore di AngularJS per farlo che non mi richiederà di aggiungere un prefisso a tutte le funzioni sugli elementi all'interno della sovrapposizione con questo frammento.

Cosa ha detto @JosephSilber, oppure passa l'oggetto $ event al ng-clickcallback e ferma la propagazione al suo interno:

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

Utilizzare $event.stopPropagation():

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

Ecco una demo: http://plnkr.co/edit/3Pp3NFbGxy30srl8OBmQ?p=preview

Mi piace l'idea di utilizzare una direttiva per questo:

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

Quindi utilizzare la direttiva come:

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

Se lo desideri, potresti rendere questa soluzione più generica come questa risposta a una domanda diversa: https://stackoverflow.com/a/14547223/347216

A volte, può avere più senso solo fare questo:

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

Ho scelto di farlo in questo modo perché non volevo myClickHandler()interrompere la propagazione degli eventi in molti altri luoghi in cui è stata utilizzata.

Certo, avrei potuto aggiungere un parametro booleano alla funzione del gestore, ma stopPropagation()è molto più significativo del semplice true.

Questo funziona per me:

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

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

Se non si desidera aggiungere la propagazione di interruzione a tutti i collegamenti, funziona anche questo. Un po 'più scalabile.

$scope.hideOverlay( $event ){

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

}

Se inserisci ng-click = "$ event.stopPropagation" sull'elemento principale del tuo modello, stopPropogation verrà catturato mentre bolle sull'albero, quindi devi scriverlo solo una volta per l'intero modello.

È possibile registrare un'altra direttiva in cima alla ng-clickquale modifica il comportamento predefinito ng-clicke interrompe la propagazione dell'evento. In questo modo non dovresti aggiungere $event.stopPropagationmanualmente.

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

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