Imagine a situação no AngularJS em que você deseja criar uma diretiva que precise responder a um evento global. Nesse caso, digamos, o evento de redimensionamento de janela.

Qual é a melhor abordagem para isso? Na minha opinião, temos duas opções: 1. Permita que todas as diretivas se vinculem ao evento e façam mágica no elemento atual 2. Crie um ouvinte global de eventos que faça um seletor DOM para obter cada elemento no qual a lógica deve estar aplicado.

A opção 1 tem a vantagem de você já ter acesso ao elemento no qual deseja executar algumas operações. Mas ... as opções 2 têm a vantagem de que você não precisa vincular várias vezes (para cada diretiva) no mesmo evento, o que pode ser um benefício de desempenho.

Vamos ilustrar as duas opções:

Opção 1:

angular.module('app').directive('myDirective', function(){

     function doSomethingFancy(el){
         // In here we have our operations on the element
    }

    return {
        link: function(scope, element){
             // Bind to the window resize event for each directive instance.
             angular.element(window).on('resize', function(){
                  doSomethingFancy(element);
             });
        }
    };
});

Opção 2:

angular.module('app').directive('myDirective', function(){

    function doSomethingFancy(){
         var elements = document.querySelectorAll('[my-directive]');
         angular.forEach(elements, function(el){
             // In here we have our operations on the element
         });
    }

    return {
        link: function(scope, element){
             // Maybe we have to do something in here, maybe not.
        }
    };

    // Bind to the window resize event only once.
    angular.element(window).on('resize', doSomethingFancy);
});

Ambas as abordagens estão funcionando bem, mas acho que a opção dois não é realmente 'Angular-ish'.

Alguma ideia?