Understanding $emit, $broadcast and $on in AngularJS

Shailendra Chauhan  Print 
Posted On : 29 Dec 2014
Updated On : 26 Sep 2016
Total Views : 155,699

AngularJS provides $on, $emit, and $broadcast services for event-based communication between controllers.

$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.

<!DOCTYPE html>
<html>
<head>
 <title>Broadcasting</title>
 <script src="lib/angular.js"></script>
 <script>
 var app = angular.module('app', []);

 app.controller("firstCtrl", function ($scope) {
 $scope.$on('eventName', function (event, args) {
 $scope.message = args.message;
 console.log($scope.message);
 });
 });

 app.controller("secondCtrl", function ($scope) {
 $scope.handleClick = function (msg) {
 $scope.$emit('eventName', { message: msg });
 };
 });

 </script>
</head>
<body ng-app="app">
 <div ng-controller="firstCtrl" style="border:2px solid #E75D5C; padding:5px;">
 <h1>Parent Controller</h1>
 <p>Emit Message : {{message}}</p>
 <br />
 <div ng-controller="secondCtrl" style="border:2px solid #428bca;padding:5px;">
 <h1>Child Controller</h1>
 <input ng-model="msg">
 <button ng-click="handleClick(msg);">Emit</button>
 </div>
 </div>
</body>
</html>

How it works..

$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.

<!DOCTYPE html>
<html>
<head>
 <title>Broadcasting</title>
 <script src="lib/angular.js"></script>
 <script>
 var app = angular.module('app', []);

 app.controller("firstCtrl", function ($scope) {
 $scope.handleClick = function (msg) {
 $scope.$broadcast('eventName', { message: msg });
 };
 
 });

 app.controller("secondCtrl", function ($scope) {
 $scope.$on('eventName', function (event, args) {
 $scope.message = args.message;
 console.log($scope.message);
 });
 });

 </script>
</head>
<body ng-app="app">
 <div ng-controller="firstCtrl" style="border:2px solid #E75D5C; padding:5px;">
 <h1>Parent Controller</h1>
 <input ng-model="msg">
 <button ng-click="handleClick(msg);">Broadcast</button>
 <br /><br />
 <div ng-controller="secondCtrl" style="border:2px solid #428bca;padding:5px;">
 <h1>Child Controller</h1>
 <p>Broadcast Message : {{message}}</p>
 </div>
 </div>
</body>
</html>

How it works..

$on

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

Note

  1. If there is no parent-child relation between your scopes you can inject $rootScope into the controller and broadcast the event to all child scopes but you cannot emit your event.

  2. You can emit your event only when you have parent-child relation and event propagation is initiated by child. However, $emit can fire an event only for all $rootScope.$on listeners.

What do you think?

I hope you will enjoy the AngularJS event-based communication while developing your app with AngularJS. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.



Free Interview Books
 
COMMENTS
prashant khairnar Reply 463 days 18 hours 36 mins ago

Great article... thanks to share

Kuldeep Reply 485 days 8 hours 58 mins ago

very simple and useful...!

Mrinal Mondal Reply 521 days 36 mins ago

Very good article

SUBSCRIBE OUR YOUTUBE CHANNEL
 
 
 
LIKE US ON FACEBOOK
 
+