取消嵌套的ng-click调用之间的事件传播的最佳方式是什么？
取消嵌套的ng-click调用之间的事件传播的最佳方式是什么？
提问于 2013-03-04 10:15:12
下面是一个例子。比方说，我想要一个像很多网站一样的图像覆盖。因此，当您单击缩略图时，会在整个窗口上显示一个黑色覆盖图，并且图像的放大版本会居中显示。单击黑色覆盖会将其取消；单击图像将调用显示下一图像的函数。
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方法，它不需要我在覆盖图中的元素上添加所有函数的前缀，使用下面的代码片段。
回答 10
Stack Overflow用户
回答已采纳
发布于 2013-03-04 10:30:50
或者将$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
}Stack Overflow用户
发布于 2013-03-04 10:19:24
使用$event.stopPropagation()
<div ng-controller="OverlayCtrl" class="overlay" ng-click="hideOverlay()">
<img src="http://some_src" ng-click="nextImage(); $event.stopPropagation()" />
</div>Stack Overflow用户
发布于 2013-11-08 04:52:59
我喜欢对此使用指令的想法：
.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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15193539
复制相关文章
相似问题