angularjs - Angular如何只触发子元素事件

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>

在 Controller 中:

$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