例を挙げましょう。多くのサイトのように画像オーバーレイを表示したいとします。サムネイルをクリックすると、ウィンドウ全体に黒いオーバーレイが表示され、画像の拡大版が中央に表示されます。黒いオーバーレイをクリックすると、オーバーレイは閉じられ、画像をクリックすると、次の画像を表示する関数が呼び出されます。
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 の方法があるかどうかを知りたいです。
ベストアンサー1
@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
}