Quelle est la meilleure façon d'annuler la propagation d'événements entre les appels ng-click imbriqués?

Voici un exemple. Disons que je veux avoir une superposition d'image comme beaucoup de sites. Ainsi, lorsque vous cliquez sur une vignette, une superposition noire apparaît sur toute votre fenêtre et une version plus grande de l'image y est centrée. Cliquer sur la superposition noire la rejette; cliquer sur l'image appellera une fonction qui affiche l'image suivante.

Le html:

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

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

Le problème est qu'avec cette configuration, si vous cliquez sur l'image, les deux nextImage()et hideOverlay()sont appelés. Mais ce que je veux, c'est seulement nextImage()être appelé.

Je sais que vous pouvez capturer et annuler l'événement dans la nextImage()fonction comme ceci:

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

... Mais je veux savoir s'il existe une meilleure façon AngularJS de le faire qui ne m'obligera pas à préfixer toutes les fonctions sur les éléments à l'intérieur de la superposition avec cet extrait de code.

Ce que @JosephSilber a dit, ou passez l'objet $ event en ng-clickcallback et arrêtez la propagation à l'intérieur de celui-ci:

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

Utilisez $event.stopPropagation():

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

Voici une démo: http://plnkr.co/edit/3Pp3NFbGxy30srl8OBmQ?p=preview

J'aime l'idée d'utiliser une directive pour cela:

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

Ensuite, utilisez la directive comme:

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

Si vous le souhaitez, vous pouvez rendre cette solution plus générique comme cette réponse à une autre question: https://stackoverflow.com/a/14547223/347216

Parfois, il peut être plus judicieux de faire ceci:

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

J'ai choisi de le faire de cette façon parce que je ne voulais myClickHandler()pas arrêter la propagation de l'événement dans les nombreux autres endroits où il était utilisé.

Bien sûr, j'aurais pu ajouter un paramètre booléen à la fonction de gestionnaire, mais stopPropagation()c'est beaucoup plus significatif que juste true.

Cela fonctionne pour moi:

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

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

Si vous ne voulez pas avoir à ajouter la propagation d'arrêt à tous les liens, cela fonctionne également. Un peu plus évolutif.

$scope.hideOverlay( $event ){

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

}

Si vous insérez ng-click = "$ event.stopPropagation" sur l'élément parent de votre modèle, stopPropogation sera intercepté au fur et à mesure qu'il remontera dans l'arborescence, vous n'aurez donc à l'écrire qu'une seule fois pour tout votre modèle.

Vous pouvez enregistrer une autre directive en plus de ng-clicklaquelle modifie le comportement par défaut de ng-clicket arrête la propagation de l'événement. De cette façon, vous n'aurez pas à ajouter $event.stopPropagationmanuellement.

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>

Utilisation du contrôleur IN

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