Привязка события к $(document) внутри угловой директивы

Question

У меня есть директива, которая реализует вид поля выбора.
Теперь, когда окно выбора открыто, и я щелкаю где-то за его пределами (где-нибудь еще в документе), мне нужно, чтобы оно свернулось.

Этот код JQuery работает внутри моей директивы, но я хочу сделать это "угловым путем":

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

Я пытался сделать что-то с помощью службы $document в моей директиве, но безуспешно.

Answer 1

Я считаю, что самый верный 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!');
            }
          })
        }
      };
    }
  ]);

})();

Плункерная ссылка