Angular如何只能觸發子元素事件

Question

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

當我點擊div的哪個id是兩個時，它會同時觸發process1和process2，我怎麼才能觸發process2？

Answer 1

我認爲你應該通過ng-click中的id 2元素中的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 2

一個解決方案是使用$event.stopPropagation。你也應該避免使用數字命名元素id。

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

event.stopPropagation：

說明：冒泡DOM樹， 防止任何父處理程序被通知的事件阻止事件。

plunker

參考

event.stopPropagation()

Answer 3

您可以使用指令這一點。這會更廣泛地停止事件傳播。

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