如何检测是否*在Angular中单击了一个指令元素

Question

我正在尝试实施＆＃34;取消选择＆＃34;按钮和弹出窗口等几个指令的功能。也就是说，当用户点击不作为我的指令模板的一部分的元素时，我想要触发我的函数。目前，我正在使用以下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
  }

})

有没有更好的方法来做角度？

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>