Usage of $broadcast(), $emit() And $on() in AngularJS

Question

I understand that $Broadcast(), $Emit() And $On() are used to raise an event in one controller and handling in another controller. If possible, can someone just give me some real time example on the usage of above three as I am new to angular JS?

I have gone through the following links and understand the basic usage.

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

Possible duplicate of [$rootScope.$broadcast vs. $scope.$emit](http://stackoverflow.com/questions/26752030/rootscope-broadcast-vs-scope-emit) — Sheelpriy, Jun 09 '16 at 05:41
Hi. Yes ,you are correct. however ,I just wanted to know the real time example on usage of them. — Balanjaneyulu K, Jun 09 '16 at 06:05

score 127 · Accepted Answer · edited Feb 20 '18 at 10:21

$emit

It dispatches an event name upwards through the scope hierarchy and notify to the registered $rootScope.Scope listeners. The event life cycle starts at the scope on which $emit was called. The event traverses upwards toward the root scope and calls all registered listeners along the way. The event will stop propagating if one of the listeners cancels it.

$broadcast

It dispatches an event name downwards to all child scopes (and their children) and notify to the registered $rootScope.Scope listeners. The event life cycle starts at the scope on which $broadcast was called. All listeners for the event on this scope get notified. Afterwards, the event traverses downwards toward the child scopes and calls all registered listeners along the way. The event cannot be canceled.

$on

It listen on events of a given type. It can catch the event dispatched by $broadcast and $emit.

Visual demo:

Demo working code, visually showing scope tree (parent/child relationship):
http://plnkr.co/edit/am6IDw?p=preview

Demonstrates the method calls:

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

Thank you for your answer. $rootScope.$broadcast is a method that lets pretty much everything hear it.$scope.$broadcast is for the $scope itself and its children. Here both the broadcast events will be listened by all child $scopes right?? What is the difference between them? — Balanjaneyulu K, Jun 09 '16 at 06:02

score 23 · Answer 2 · edited Nov 03 '18 at 23:12

23

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.

edited Nov 03 '18 at 23:12

Worthwelle

1,244
1
16
19

answered Mar 13 '17 at 20:03

Srikrushna

4,366
2
39
46

score 20 · Answer 3 · answered Jun 09 '16 at 05:41

This little example shows how the $rootScope emit a event that will be listen by a children scope in another 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

The answer of @gayathri bottom explain technically the differences of all those methods in the scope angular concept and their implementations $scope and $rootScope.

Usage of $broadcast(), $emit() And $on() in AngularJS

3 Answers3

Linked