Utilizzo di $ broadcast(), $ emit() e $ on() in AngularJS

Question

Capisco che $Broadcast(), $Emit() E $On() siano utilizzati per generare un evento in un controller e la gestione in un altro controller. Se possibile, qualcuno può darmi qualche esempio in tempo reale sull'uso di sopra di tre poiché sono nuovo di angular JS?

Ho seguito i seguenti collegamenti e ne ho compreso l'utilizzo di base.

http://www.binaryintellect.net/articles/5d8be0b6-e294-457e-82b0-ba7cc10cae0e.aspx

Answer 1

$ emettono

Si invia un nome di un evento verso l'alto attraverso la gerarchia portata e notificano alla registrati $rootScope.Scope ascoltatori. Il ciclo di vita dell'evento inizia nell'ambito in cui è stato chiamato $emit. L'evento attraversa verso l'alto l'ambito di root e chiama tutti gli ascoltatori registrati lungo la strada. L'evento smetterà di propagarsi se uno degli ascoltatori lo annulla.

$ trasmettere

Si invia un nome di un evento verso il basso per tutti gli ambiti dei bambini (ei loro figli) e notificano alla registrati $rootScope.Scope ascoltatori. Il ciclo di vita dell'evento inizia nell'ambito in cui è stato chiamato $broadcast. Ricevi tutti gli ascoltatori per l'evento su questo ambito. Successivamente, l'evento attraversa verso il basso verso gli ambiti figlio e chiama tutti gli ascoltatori registrati lungo la strada. L'evento non può essere annullato.

$ sul

E ascoltare su eventi di un certo tipo. Può prendere l'evento inviato da $broadcast e $emit.

---

visivo demo:

codice funzionante demo, che mostra visivamente albero portata (genitore/relazione figlio):
http://plnkr.co/edit/am6IDw?p=preview

dimostra il metodo chiama:

$scope.$on('eventEmitedName', function(event, data) ... 
    $scope.broadcastEvent 
    $scope.emitEvent 

Answer 2

Questo piccolo esempio mostra come $rootScope emette un evento che sarà ascoltato da un ambito figlio in un altro controller.

(function(){ 


angular 
    .module('ExampleApp',[]); 

angular 
    .module('ExampleApp') 
    .controller('ExampleController1', Controller1); 

Controller1.$inject = ['$rootScope']; 

function Controller1($rootScope) { 
    var vm = this, 
     message = 'Hi my children scope boy'; 

    vm.sayHi = sayHi; 

    function sayHi(){ 
    $rootScope.$broadcast('greeting', message); 
    } 

} 

angular 
    .module('ExampleApp') 
    .controller('ExampleController2', Controller2); 

Controller2.$inject = ['$scope']; 

function Controller2($scope) { 
    var vm = this; 

    $scope.$on('greeting', listenGreeting) 

    function listenGreeting($event, message){ 
    alert(['Message received',message].join(' : ')); 
    } 

} 


})(); 

http://codepen.io/gpincheiraa/pen/xOZwqa

La risposta di fondo @gayathri spiegare tecnicamente le differenze di tutti quei metodi del concetto angolare portata e implementate $scope e $rootScope.

Answer 3

Broadcast: We can pass the value from parent to child 
     i.e parent -> child controller. 
Emit: we can pass the value from child to parent 
     i.e.child ->parent controller. 
On: catch the event dispatched by $broadcast or $emit. 

Answer 4

Questo è un esempio di post per eventi agulari con un buon esempio. Se vuoi, puoi passare attraverso Spero che chiarirai su questi eventi angolari più di quanto ti aspettassi. Ecco il link http://www.riaxe.com/blog/understanding-angulars-scope-and-rootscope-event-system-emit-broadcast-and-on/