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

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

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

我喜欢为此使用指令的想法：

.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

有时，这样做可能最有意义：

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

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

当然，我可以在处理函数中添加一个布尔参数，但stopPropagation()它比just有意义得多true。

这对我有用：

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

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

如果您不想将停止传播添加到所有链接，则也可以使用。更具可扩展性。

$scope.hideOverlay( $event ){

   // only hide the overlay if we click on the actual div
   if( $event.target.className.indexOf('overlay') ) 
      // hide overlay logic

}

如果在模板的父元素上插入ng-click =“ $ event.stopPropagation”，则会在树上冒起stopPropogation时被捕获，因此您只需为整个模板编写一次即可。

您可以在ng-click其上注册另一个指令，以修改的默认行为ng-click并停止事件传播。这样，您无需$event.stopPropagation手动添加。

app.directive('ngClick', function() {
    return {
        restrict: 'A',
        compile: function($element, attr) {
            return function(scope, element, attr) {
                element.on('click', function(event) {
                    event.stopPropagation();
                });
            };
        }
    }
});

<div ng-click="methodName(event)"></div>

IN控制器的使用

$scope.methodName = function(event) { 
    event.stopPropagation();
}