Associazione di un evento a $ (documento) all'interno di una direttiva angolare

Question

Ho una direttiva che implementa il tipo di una casella di selezione.
Ora quando la casella di selezione è aperta e faccio clic da qualche parte al di fuori di essa (in qualsiasi altro punto del documento), ho bisogno che crolli.

Questo codice JQuery funziona dentro la mia direttiva, ma voglio farlo "il modo angolare":

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

Ho provato a fare cosa con l'iniezione il servizio documento $ nella mia direttiva, ma non ci sono riuscito.

Answer 1

credo, il più vero modo angolare è quello di utilizzare al posto di angular.elementjQuery e l'accesso window.document tramite il servizio $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