<div ng-click="process1()" id="1">
<div ng-click="process2()" id="2">
</div>
</div>
当我点击div的哪个id是两个时,它会同时触发process1和process2,我怎么才能触发process2?Angular如何只能触发子元素事件
<div ng-click="process1()" id="1">
<div ng-click="process2()" id="2">
</div>
</div>
当我点击div的哪个id是两个时,它会同时触发process1和process2,我怎么才能触发process2?Angular如何只能触发子元素事件
我认为你应该通过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/
谢谢!
一个解决方案是使用$event.stopPropagation
。你也应该避免使用数字命名元素id。
<div ng-click="process1();$event.stopPropagation();" id="div1">
event.stopPropagation:
说明:冒泡DOM树, 防止任何父处理程序被通知的事件阻止事件。
参考
您可以使用指令这一点。这会更广泛地停止事件传播。
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