javascript - 在 Angular Directive(指令)中将事件绑定(bind)到 $(document)

Question

我有一个实现某种选择框的指令。
现在，当Select框打开并单击它外部的某个地方(文档中的其他任何地方)，我需要折叠。

这个 JQuery 代码在我的指令中工作，但我想以“Angular 方式”来做:

  $(document).bind('click', function (e) {
       var $clicked = e.target;
       if (!$clicked.parents().hasClass("myClass")) {
            scope.colapse();
       }
  });

我尝试将 $document 服务注入(inject)我的指令，但没有成功。

Answer 1

我相信，最真实的 Angular 方法是使用 angular.element 而不是 jQuery 并通过 访问 window.document >$文档服务:

(function() {

  angular.module('myApp').directive('myDocumentClick', 
    ['$window', '$document', '$log',
    function($window, $document, $log) {
      return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          $document.bind('click', function(event) {
            $log.info(event);
            if (angular.element(event.target).hasClass('myClass')) {
              $window.alert('Foo!');
            }
          })
        }
      };
    }
  ]);

})();

Plunker link