Question

<div ng-click="process1()" id="1">
    <div ng-click="process2()" id="2">
    </div>
</div>

当我点击id为2的div时，它会触发process1和process2，我怎样才能触发process2？

Answer 1

您可以使用指令。停止事件传播将更加普遍。

HTML

<div ng-click="process1()" id="1">
    <div ng-click="process2()" id="2" stop-event>
    </div>

在控制器中：

$scope.process1 = function(){
    alert(1);
}

$scope.process2 = function(){
    alert(2);
}

只需使用指令

.directive('stopEvent', function () {
return {
    restrict: 'A',
    link: function (scope, element, attr) {
        element.bind('click', function (e) {
            e.stopPropagation();
        });
    }
}

jsFiddle：http://jsfiddle.net/6m290Lbt/3/

如果您愿意，可以使此解决方案更加通用，就像对不同问题的回答一样：https://stackoverflow.com/a/14547223/347216

Answer 2

我认为您应该在id-2的ng-click中从html传递$event，然后在控制器中调用该事件的stopPropagation方法。

HTML -

<div ng-click="process1()" id="1">
    <div ng-click="process2($event)" id="2">
    </div>
</div>

并在控制器中 - ：

app.controller('MainCtrl', function($scope) {
    $scope.process1 = function(){
        alert(1);
    }

    $scope.process2 = function(event){
        event.stopPropagation();
        alert(2);
    }
});

JSFiddle - http://jsfiddle.net/SSHYK/131/

谢谢！

Answer 3

一种解决方案是使用$event.stopPropagation。此外，您应该避免使用数字命名元素id。

<div ng-click="process1();$event.stopPropagation();" id="div1">

<强> event.stopPropagation：

描述：防止事件冒泡DOM树，防止任何父处理程序被通知事件。

plunker

<强>参考

event.stopPropagation()

Angular如何才能触发子元素事件

3 个答案: