[英]Angular.js, cancel ng-click event
我有这段HTML
<button ui:confirm ng:click="action"></button>
和一些JavaScript
.directive('uiConfirm', function()
{
return {
restrict: 'A',
link: function(scope, element, attrs)
{
element.bind('click.confirm', function(event)
{
event.preventDefault();
event.stopPropagation();
});
}
}
})
现在,我正在尝试做的是从指令中取消ng:click事件。 但是,无论我做什么,点击仍然会被触发。
演示: 小提琴
编辑:顺便说一句,在此范围内导致错误:
element.bind('click.confirm', function(event)
{
causeAnError();
event.preventDefault();
event.stopPropagation();
});
诀窍,并取消事件传播,但也抛出和丑陋的错误=)
编辑2:最后我找到了解决方案!
.directive('uiConfirm', function()
{
return {
restrict: 'A',
link: function(scope, element, attrs)
{
element.bind('click', function(event)
{
scope.$eval(attrs.uiConfirm); // this line of code does the magic!
});
}
}
})
编辑3:
最终解决方案
.directive('uiConfirm', function()
{
return {
restrict: 'A',
link: function(scope, element, attrs)
{
/**
* Clicking the trigger start the confirmation process.
*/
element.bind('click.confirm', function(event)
{
// not confirmed?
if( ! element.data().confirmed)
{
element.data().confirmed = true;
element.addClass('btn-danger');
}
// is already confirmed..
else
{
element.trigger('mouseout.confirm');
scope.$eval(attrs.uiConfirm);
}
});
/**
* Leaving the element, resets the whole process.
*/
element.bind('mouseout.confirm', function()
{
// reset all values
element.data().confirmed = false;
element.removeClass('btn-danger');
});
// reset the whole process on the first run
element.trigger('mouseout.confirm');
}
}
})
第一次单击按钮,将其变为红色,并且不会触发任何操作。 再次单击,调用该操作。 离开按钮会重置整个过程。
正如对@Flek的回答的评论中所讨论的,要调用属性中定义的函数,
ui:confirm="action()"
使用范围。$ eval() :
element.bind('click', function(event) {
scope.$eval(attrs.uiConfirm); // calls action() on the scope
});
您有两个嵌套指令:
然后绑定两个事件处理程序(一个通过uiConfirm,另一个通过ngClick)。 使用preventDefault你想要停止默认操作,但我想按钮的默认操作不是调用action()方法。 stopPropagation只是阻止事件冒泡 DOM树,但由于你只关心按钮本身,它不会改变任何东西。
我要做的是在指令中创建一个自定义操作方法,然后检查它是否应该执行某些操作。
.directive('uiConfirm', function()
{
return {
restrict: 'A',
link: function(scope, element, attrs)
{
scope.action = function(){
// Check whether there is something to do or not.
};
}
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.