我有指令做类似的事情:
app.directive('custom', function(){
return {
restrict:'A',
link: function(scope, element){
element.bind('click', function(){
alert('want to prevent this');
});
}
}
});
是的,为这种情况做jQuery-way绑定是必要的。
现在我想在遇到某些条件时停止此事件(点击)传播。
试图做:
$event.stopPropagation();
$event.preventDefault();
但它没有帮助。
这里举个例子 - http://jsfiddle.net/STEVER/5bfkbh7u/
答案 0 :(得分:7)
在你的情况下,你不能停止传播,因为点击事件发生在同一个元素上,只有两个不同的处理程序。
但是,您可以利用这是控制器ngClick
和指令中的相同事件对象这一事实。所以你可以做的是为这个事件对象设置一些属性,并在指令中检查它:
$scope.dosomething = function($event){
$event.stopPropagation();
$event.preventDefault();
alert('here');
if (someCondtion) {
$event.stopNextHandler = true;
}
}
并在指令中:
link: function(scope, element){
element.bind('click', function(e) {
if (e.stopNextHandler !== true) {
alert('want to prevent this');
}
});
}
答案 1 :(得分:2)
您是否尝试降低此指令的优先级以确保它在ng-click指令后绑定?我假设事件按照它们绑定的顺序触发,而这又是由ng-click指令与指令的优先级决定的。
您还需要stopImmediatePropagation来防止同一元素上的任何其他处理程序被触发。 stopPropagation只是阻止事件传播到父处理程序。
答案 2 :(得分:1)
Use e.stopImmediatePropagation();
elem.bind('click', function (e) {
if (disable(scope)){
e.stopImmediatePropagation();
return false;
}
return true;
});
答案 3 :(得分:0)
这里没有任何事件传播,因为你有按钮,你不得不在同一个元素上发生事件,这不会转到子元素的父元素,即没有事件冒泡或事件捕获在这里
答案 4 :(得分:0)
您将两个事件都附加到按钮。注册第二个事件时检查元素
<div ng-controller="mainCtrl" custom>
Hi! I'm the parent.
<button ng-click="dosomething($event)">BUTTON</button>
</div>