ネストされた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
}

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