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

Question

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

Answer 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>