Вот пример. Допустим, я хочу, чтобы изображение было наложено, как на многих сайтах. Поэтому, когда вы щелкаете по миниатюре, над всем окном появляется черный оверлей, и в нем центрируется увеличенная версия изображения. Щелчок по черному наложению отклоняет его; щелчок по изображению вызовет функцию, которая показывает следующее изображение.
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, который бы не требовал от меня добавления этого кода ко всем функциям элементов внутри оверлея.
onclick
, а не ng-click
.
return false
в конце функции