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

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

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

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

Ответы

Ответ 1

$ Испустите

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

$ Вещать

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

$ На

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

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

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

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

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

Ответ 2

  • Широковещательная рассылка: мы можем передать значение от родителя к потомку (т.е. родитель → дочерний контроллер.)
  • Emit: мы можем передать значение от дочернего к родительскому (т.е .child → родительский контроллер.)
  • On: поймать событие, отправленное $broadcast или $emit.

Ответ 3

Этот небольшой пример показывает, как $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 bottom объясняет технически различия всех этих методов в концепции angular и их реализации $scope и $rootScope.