在嵌套的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
}

Answer 2

用途$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

Answer 3

我喜欢使用指令的想法:

.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

Answer 4

有时候,这样做最有意义:

<widget ng-click="myClickHandler(); $event.stopPropagation()"/>

我选择这样做是因为我不想myClickHandler()在其他许多地方停止事件传播.

当然,我可以在处理程序函数中添加一个布尔参数,但stopPropagation()更有意义true.

Answer 5

这对我有用:

<a href="" ng-click="doSomething($event)">Action</a>

this.doSomething = function($event) {
  $event.stopPropagation();
  $event.preventDefault();
};