将事件绑定到angular指令中的$(document)

时间:2014-06-23 10:22:12

标签: javascript jquery angularjs document

我有一个指令,它实现了一种选择框 现在,当选择框打开并且我点击它之外的某个地方(文档中的任何其他位置)我需要它崩溃。

这个JQuery代码在我的指令中工作,但我想这样做"角度方式":

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

我尝试将$ document服务注入到我的指令中,但没有成功。

1 个答案:

答案 0 :(得分:18)

我相信,最真实的Angular方式是使用angular.element代替jQuery并通过window.document服务访问$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