[解決済み] ネストされた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-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
}