取消嵌套ng-click调用之间的事件传播的最佳方法是什么？

Question

这是一个例子。假设我想像许多网站一样覆盖图片。因此，当您单击缩略图时，整个窗口上方会出现一个黑色的叠加层，并且较大的图像版本位于其中。单击黑色覆盖将其关闭；单击该图像将调用显示下一张图像的函数。

的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方法，不需要我用此代码段在叠加层内的元素上添加所有函数的前缀。

Answer 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
}