取消嵌套 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 方法来做这件事，它不需要我在覆盖层内的元素上的所有函数前面加上这个片段。

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

我正在尝试使用 picasso 库来将 url 加载到 imageView，但我无法context正确使用 picasso 库。public class FeedAdapter extends Recyc ...