Вот пример. Скажем, я хочу, чтобы изображение накладывалось подобно множеству сайтов. Поэтому, когда вы нажимаете миниатюру, над вашим окном появляется черная надпись, и в ней сосредоточена большая версия изображения. Щелчок на черном наложении отклоняет его; щелчок по изображению вызовет функцию, отображающую следующее изображение.
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-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>
Если бы вы хотели, вы могли бы сделать это решение более общим, как этот ответ, на другой вопрос: fooobar.com/questions/38474/...
Иногда это может иметь смысл только для этого:
<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();
});
};
}
}
});
В контроллере IN используется
$scope.methodName = function (event) {event.stopPropagation();}