如何检测指令元素是不是*未*在 Angular 中单击

Posted 2023-05-09

【中文标题】如何检测指令元素是不是*未*在 Angular 中单击

【英文标题】：How to detect if a directive element is *not* clicked in Angular如何检测指令元素是否*未*在 Angular 中单击

【发布时间】：2015-01-14 00:07:48

【问题描述】：

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

)

有没有更好的角度来做到这一点？

【参考方案1】：

一个检测元素外点击的简单指令（没有 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>

【讨论】：

我遇到了这个实现的问题。 target.parentElement 不能用于遍历指令模板内的元素。它表明他们的父母是'null'。因此，即使您 select 当前指令元素

，onDeselect 函数也会触发