gpt4 book ai didi

jquery - 如何检测 Angular 中是否*未*单击指令元素

转载 作者:行者123 更新时间:2023-12-01 01:14:35 28 4
gpt4 key购买 nike

我正在尝试为按钮和弹出窗口等多个指令实现“取消选择”功能。也就是说,我希望当用户单击不属于指令模板一部分的元素时触发我的函数。目前,我正在使用以下 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/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com