Який найкращий спосіб скасувати поширення події між вкладеними дзвінками ng-клацання?

Ось приклад. Скажімо, я хочу мати зображення, як на багатьох сайтах. Отже, коли ви клацаєте на ескіз, над усім вашим вікном з’являється чорна накладка, а більша версія зображення зосереджена в ньому. Клацання чорної накладки відхиляє її; клацнувши зображення, викличе функцію, яка показує наступне зображення.

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, або передайте об'єкт $ події у ng-clickзворотний виклик і зупиніть розповсюдження всередині нього:

<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();
}