Jaki jest najlepszy sposób na anulowanie propagacji zdarzeń między zagnieżdżonymi wywołaniami ng-click?

Oto przykład. Powiedzmy, że chcę mieć nakładkę graficzną podobną do wielu witryn. Tak więc po kliknięciu miniatury na całym oknie pojawia się czarna nakładka, w której jest umieszczona większa wersja obrazu. Kliknięcie czarnej nakładki powoduje jej oddalenie; kliknięcie obrazu wywoła funkcję, która pokazuje następny obraz.

HTML:

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

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

Problemem jest to, że przy tej konfiguracji, jeśli klikniesz obraz, zarówno nextImage()i hideOverlay()są nazywane. Ale chcę tylko nextImage()zostać powołany.

Wiem, że możesz przechwytywać i anulować zdarzenie w następującej nextImage()funkcji:

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

... Ale chcę wiedzieć, czy jest lepszy sposób AngularJS, który nie wymaga ode mnie prefiksu wszystkich funkcji w elementach nakładki za pomocą tego fragmentu.

Co powiedział @JosephSilber, lub przekaż obiekt zdarzenia $ do ng-clickwywołania zwrotnego i zatrzymaj propagację w nim:

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

Użyj $event.stopPropagation():

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

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

Podoba mi się pomysł użycia do tego dyrektywy:

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

Następnie użyj dyrektywy w następujący sposób:

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

Jeśli chcesz, możesz uczynić to rozwiązanie bardziej ogólnym, na przykład odpowiedź na inne pytanie: https://stackoverflow.com/a/14547223/347216

Czasami może to mieć sens:

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

Postanowiłem to zrobić w ten sposób, ponieważ nie chciałem myClickHandler()zatrzymywać propagacji zdarzeń w wielu innych miejscach, w których były używane.

Jasne, mogłem dodać parametr boolowski do funkcji obsługi, ale stopPropagation()jest on o wiele bardziej znaczący niż tylko true.

To działa dla mnie:

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

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

Jeśli nie chcesz dodawać zatrzymania propagacji do wszystkich łączy, to również działa. Trochę bardziej skalowalny.

$scope.hideOverlay( $event ){

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

}

Jeśli wstawisz ng-click = "$ event.stopPropagation" na elemencie nadrzędnym twojego szablonu, stopPropogation zostanie przechwycone, gdy pojawi się ono w drzewie, więc musisz napisać go tylko raz dla całego szablonu.

Możesz zarejestrować kolejną dyrektywę, ng-clickktóra zmienia domyślne zachowanie ng-clicki zatrzymuje propagację zdarzeń. W ten sposób nie musisz dodawać $event.stopPropagationręcznie.

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>

Wykorzystanie kontrolera IN

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