Uso de $ broadcast (), $ emit () y $ on () en AngularJS

Entiendo que $Broadcast() , $Emit() y $On() se usan para generar un evento en un controlador y manejarlo en otro controlador. Si es posible, ¿alguien me puede dar un ejemplo en tiempo real sobre el uso de los tres anteriores ya que soy nuevo en el sistema angular JS ?

He revisado los siguientes enlaces y entiendo el uso básico.

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

$ emitir

Distribuye un nombre de evento hacia arriba a través de la jerarquía de scope y lo notifica a los oyentes $rootScope.Scope registrados. El ciclo de vida del evento comienza en el scope en el que se $emit . El evento se desplaza hacia arriba hacia el scope raíz y llama a todos los oyentes registrados a lo largo del camino. El evento dejará de propagarse si uno de los oyentes lo cancela.

$ emisión

Envía un nombre de evento hacia abajo a todos los ámbitos secundarios (y sus secundarios) y lo notifica a los oyentes $rootScope.Scope registrados. El ciclo de vida del evento comienza en el scope en el que se llamó $broadcast . Todos los oyentes para el evento en este scope reciben una notificación. Posteriormente, el evento se desplaza hacia abajo hacia los ámbitos secundarios y llama a todos los oyentes registrados a lo largo del camino. El evento no puede ser cancelado.

$ en

Escucha sobre eventos de un tipo dado. Puede ver el evento enviado por $broadcast y $emit .


Demostración visual:

Código de trabajo de demostración, que muestra visualmente el árbol de scope (relación padre / hijo):
http://plnkr.co/edit/am6IDw?p=preview

Demuestra las llamadas al método:

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

Este pequeño ejemplo muestra cómo $rootScope emite un evento que será escuchado por un scope de niños en otro controlador.

 (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 respuesta de @gayathri bottom explica técnicamente las diferencias de todos los métodos en el concepto de ámbito angular y sus implementaciones $scope y $rootScope .

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

Esta es una publicación de ejemplo para eventos agulares con un buen ejemplo. Si quieres puedes pasar por la lata. Espero que borre estos eventos angulares más de lo que esperaba. Aquí está el enlace http://www.riaxe.com/blog/understanding-angulars-scope-and-rootscope-event-system-emit-broadcast-and-on/