Каков наилучший способ отменить распространение событий между вложенными вызовами ng-click?

Вот пример. Допустим, я хочу, чтобы изображение было наложено, как на многих сайтах. Поэтому, когда вы щелкаете по миниатюре, над всем окном появляется черный оверлей, и в нем центрируется увеличенная версия изображения. Щелчок по черному наложению отклоняет его; щелчок по изображению вызовет функцию, которая показывает следующее изображение.

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

Проблема в том, что при такой настройке, если щелкнуть изображение, оба nextImage()и hideOverlay()вызываются. Но я хочу, чтобы меня только nextImage()называли.

Я знаю, что вы можете захватить и отменить событие в nextImage()функции, как это:

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

... Но я хочу знать, есть ли лучший способ сделать это на AngularJS, который бы не требовал от меня добавления этого кода ко всем функциям элементов внутри оверлея.

Что сказал @JosephSilber, или передайте объект $ event в ng-clickcallback и остановите распространение внутри него:

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

Используйте $event.stopPropagation():

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

Вот демонстрация: http://plnkr.co/edit/3Pp3NFbGxy30srl8OBmQ?p=preview

Мне нравится идея использования директивы для этого:

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

Затем используйте директиву как:

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

Если вы хотите, вы можете сделать это решение более общим, как этот ответ на другой вопрос: https://stackoverflow.com/a/14547223/347216

Иногда может иметь смысл сделать это:

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

Я решил сделать это таким образом, потому что я не хотел myClickHandler()останавливать распространение события во многих других местах, где оно использовалось.

Конечно, я мог бы добавить логический параметр в функцию-обработчик, но stopPropagation()он гораздо важнее, чем просто true.

Это работает для меня:

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

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

Если вы не хотите добавлять остановку распространения ко всем ссылкам, это также работает. Чуть более масштабируемый.

$scope.hideOverlay( $event ){

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

}

Если вы вставите ng-click = "$ event.stopPropagation" в родительский элемент вашего шаблона, то stopPropogation будет перехвачен, поскольку он всплывает в дереве, поэтому вы должны написать его только один раз для всего шаблона.

Вы можете зарегистрировать другую директиву, ng-clickкоторая изменяет поведение по умолчанию ng-clickи останавливает распространение события. Таким образом, вам не придется добавлять $event.stopPropagationвручную.

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>

Использование контроллера IN

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