Gắn kết sự kiện với $ (tài liệu) bên trong chỉ thị góc

Question

Tôi có một chỉ thị thực hiện loại hộp chọn.
Bây giờ khi hộp chọn được mở và tôi bấm vào một nơi nào đó bên ngoài nó (bất cứ nơi nào khác trong tài liệu), tôi cần nó sụp đổ.

đang JQuery này hoạt động bên trong chỉ thị của tôi, nhưng tôi muốn làm điều đó "cách góc":

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

Tôi đã cố gắng làm điều với tiêm dịch vụ tài liệu $ vào chỉ thị của tôi, nhưng không thành công.

Answer 1

Tôi tin rằng, cách góc đúng nhất là sử dụng angular.element thay vì jQuery và truy cập window.document thông qua dịch vụ $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