Comunicazione direttiva-direttiva in AngularJS?

Question

So già che è possibile impostare un controller all'interno di una direttiva e che altre direttive possono chiamare le funzioni su quel controller. Ecco ciò che il mio attuale direttiva si presenta come:

app.directive("foobar", function() { 
    return { 
    restrict: "A", 
    controller: function($scope) { 
     $scope.trigger = function() { 
     // do stuff 
     }; 
    }, 
    link: function(scope, element) { 
    // do more stuff 
    } 
    }; 
}); 

So che potrei chiamare in questo modo:

app.directive("bazqux", function() { 
    return { 
    restrict: "A", 
    require: "foobar", 
    link: function(scope, element, attrs, fooBarCtrl) { 
     fooBarCtrl.trigger(); 
    } 
    }; 
}); 

Tuttavia, voglio essere in grado di chiamare grilletto da qualsiasi direttiva, non solo i miei personalizzati, come questo:

Se ciò non funziona, c'è un modo per introdurre una terza direttiva per farlo accadere? Come questo?

<button ng-click="trigger()" target-directive="foobar">Click me!</button> 

Grazie!

Answer 1

Un modo semplice di realizzare comunicazione a larga applicazione tra i componenti sarebbe usare eventi globali (emessi dal $ rootScope). Per esempio:

JS:

app.directive('directiveA', function($rootScope) 
{ 
    return function(scope, element, attrs) 
    { 
     // You can attach event listeners in any place (controllers, too) 

     $rootScope.$on('someEvent', function() 
     { 
      alert('Directive responds to a global event'); 
     }); 
    }; 
}); 

HTML:

<button ng-click="$emit('someEvent')">Click me!</button> 

Qui si sta emettendo un evento dal campo di applicazione bambino, ma alla fine si raggiunge il $rootScope ed eseguire il ascoltatore precedente.

Ecco un esempio: http://plnkr.co/edit/CpKtR5R357tEP32loJuG?p=preview

Answer 2

Sembra che tu abbia bisogno di un servizio angolare. http://docs.angularjs.org/guide/dev_guide.services

Ciò consentirà di condividere la funzionalità tra le direttive.

Ecco una domanda simile: Sharing data between directives

Answer 3

Quando si parla su IRC si è scoperto che la comunicazione non è necessaria:

Ho una direttiva attributo limitato, che esegue alcune manipolazione del DOM sul suo genitore elemento quando è "attivato"

Una soluzione è mantenere la logica all'interno della stessa direttiva e solo applicare le modifiche dom al genitore. http://jsfiddle.net/wt2dD/5/

scope.triggerSmthOnParent = function() { 
    element.parent().toggleClass('whatewer'); 
}