我正在尝试为按钮和弹出窗口等多个指令实现“取消选择”功能。也就是说,我希望当用户单击不属于指令模板一部分的元素时触发我的函数。目前,我正在使用以下 JQuery 代码:
$('body').click(function(evt){
if($(evt.target).closest($('#directive1')).length == 0 ){
//deselects first directive
}
if($(evt.target).closest($('#directive2')).length == 0 ){
//deselects second directive
}
})
有更好的方法在 Angular 上做到这一点吗?
最佳答案
一个简单的指令,用于检测元素外部的点击(没有 jQuery):
http://jsbin.com/wimeyoruxo/2/edit
app.directive('onDeselect', [ '$document', function($document) {
return {
scope: { onDeselect: '&' },
link: function(scope, element, attrs) {
var clickHandler = function(e) {
// Check if the target is our element or it's descendants
var target = e.target;
while (target) {
if (element[0] === target) return;
target = target.parentElement;
}
// trigger the function
scope.$apply(function() {
scope.onDeselect({$event:e});
});
};
$document.on('click', clickHandler);
// clean handler on destroy
scope.$on('$destroy', function() {
$document.off('click', clickHandler);
});
}
};
}]);
像这样使用它:
<div on-deselect="doSomething($event)"></div>
关于jquery - 如何检测 Angular 中是否*未*单击指令元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26966600/