Использование $ broadcast(), $ emit() и $ on() в AngularJS

Question

Я понимаю, что $Broadcast(), $Emit() И $On() используются, чтобы поднять событие на одном контроллере и обрабатывать его на другом контроллере. Если возможно, может кто-то просто дать мне пример в реальном времени по использованию выше трех, поскольку я новичок в angular JS?

Я воспользовался следующими ссылками и понял основное использование.

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

Answer 1

$ испускают

Он посылает название события вверх по иерархии объема и уведомлять зарегистрированных $rootScope.Scope слушателей. Жизненный цикл события начинается с области, на которой был вызван $emit. Событие перемещается вверх к корневой области и вызывает всех зарегистрированных слушателей на этом пути. Событие прекратит распространение, если один из слушателей отменяет его.

$ вещать

отправляется имя события вниз для всех дочерних областей (и их детей) и уведомляют зарегистрированным $rootScope.Scope слушателей. Жизненный цикл события начинается с области, на которой был вызван $broadcast. Все слушатели мероприятия в этой области получат уведомление. После этого событие перемещается вниз к дочерним областям и вызывает всех зарегистрированных слушателей по пути. Событие не может быть отменено.

$ на

Это слушать о событиях данного типа. Он может поймать событие, отправленное $broadcast и $emit.

---

Визуальная демонстрация:

Demo рабочий код, визуально показывающий область действия дерева (родитель/ребенок отношения):
http://plnkr.co/edit/am6IDw?p=preview

Демонстрирует метод вызовов:

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

Answer 2

Этот небольшой пример показывает, как $rootScope испускает событие, которое будет прослушиваться дочерней областью в другом контроллере.

(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

Ответ @gayathri дна объяснить технически различия всех этих методов в области видимости угловой концепции и их реализации $scope и $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

Это пример сообщения для бурных событий с хорошим примером. Если хочешь, можешь пройти через банку. Надеюсь, вы раскроете эти угловые события больше, чем вы ожидали. Вот ссылка http://www.riaxe.com/blog/understanding-angulars-scope-and-rootscope-event-system-emit-broadcast-and-on/