什么是取消嵌套NG-点击呼叫之间事件传播的最佳方式？ [英] What's the best way to cancel event propagation between nested ng-click calls?

问题描述

下面是一个例子。比方说，我想有一个图像叠加像很多网站。所以，当你点击缩略图，黑色覆盖在显示你的整个窗口，图像的放大版在它的中心。点击黑色覆盖遣散它;点击图片将调用一个函数，显示下一个图像。

Here's an example. Let's say I want to have an image overlay like a lot of sites. So when you click a thumbnail, a black overlay appears over your whole window, and a larger version of the image is centered in it. Clicking the black overlay dismisses it; clicking the image will call a function that shows the next image.

该HTML：

<div ng-controller="OverlayCtrl" class="overlay" ng-click="hideOverlay()">
    <img src="http://some_src" ng-click="nextImage()"/>
</div>

JavaScript的：

The 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（）被调用。

The problem is that with this setup, if you click the image, both nextImage() and hideOverlay() are called. But what I want is for only nextImage() to be called.

我知道你可以捕捉并取消在这样的 NEXTIMAGE（）函数的事件：

I know you can capture and cancel the event in the nextImage() function like this:

if (window.event) {
    window.event.stopPropagation();
}

...但我想知道是否有这样做的更好的方式AngularJS不会要求我preFIX所有的功能与此片段覆盖的元素。

...But I want to know if there's a better AngularJS way of doing it that won't require me to prefix all of the functions on elements inside the overlay with this snippet.

推荐答案

什么@JosephSilber说，还是通过$事件对象为 NG-点击回调，并停止传播它里面：

What @JosephSilber said, or pass the $event object into ng-click callback and stop the propagation inside of it:

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

这篇关于什么是取消嵌套NG-点击呼叫之间事件传播的最佳方式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！