Hello Readers,

In today's post we will learn about $broadcast(), $emit(), $on() methods. In AngularJs application communication between controllers is very important. Communication might be to pass data or to send notification between controllers. There are many different ways to do this. In this article we will talk about three methods $broadcast(), $emit(), $on().

Introduction:

Lets have to look about what is the use and purpose of these methods. $broadcast() and $emit() both the methods are used to move up an event throughout AngularJS application. But there is slightly difference between both the methods as $broadcast() method sends event from parent controller to child controller. On the other hand $emit() sends event child controller to all its parent controllers.

Now, the $on() method handled that event sent by $broadcast() and $emit() method.

For Example:

// Syntax for $broadcast() method.
$scope.$broadcast("myData",data);

// Syntax for $emit() method.
$scope.$emit("myData",data);

// Syntax for $on() method.

$scope.$on("myData", function(evt,data){ 
   console.log(data);
});

In the above example there is syntax for all three methods and myData is user defined name of event that you want to sent between controllers.

Relationship between controllers:

• If there are nested controllers they will consider as child parent relationship.
• If there are sibling controllers then they will consider controllers at same level with out any relation.

Nested controllers:

Examples of Nested controllers with $broadcast(), $emit(), $on() method.

<div class="row">
     <div class="col col-100">
          <button ng-click="broadcast()">Broadcast</button>
          <p>{{message}}</p>
     </div>            
</div>
<div class="row" ng-controller="myCtrl1">
     <div class="col col-50">
          <p>{{message}}</p>
     </div>
     <div class="col col-50" ng-controller="myCtrl2">
          <p>{{message}}</p>
          <button ng-click="emit()">emit</button>
     </div>
</div>

.controller('DashCtrl', function($rootScope, $scope) {
    $scope.broadcast = function()
    {
    	$scope.$broadcast("myData", "I am here");
    }
    $scope.$on("myData", function (evt, data) {
    	$scope.message = data;
	});
})
.controller('myCtrl1', function($scope) {
	$scope.$on("myData", function (evt, data) {
    	$scope.message = data;
	});
})
.controller('myCtrl2', function($scope) {	
	$scope.$on("myData", function (evt, data) {
    	$scope.message = data;
	});

	$scope.emit = function()
    {
    	$scope.$emit("myData", "I am back");
    }
})

In the above example there are three controllers. dashCtrl is parent controller and myCtrl1, myCtrl2 are its child controllers. dashCtrl move up the myData event through $broadcast() method to its child controllers and also handled the myData event using $on() method. In myCtrl2 controller move up the myData event using $emit() method to its all parent controller.

Sibling controller:

We can also communicate with out any relationship between controllers. But we need to use $rootScope instead of $scope  because each controller has its own scope so we can't inherit the scope of any controller. Due to its global scope $emit() is not useful we can pass data using  $broadcast() method. 

For Example:

<div class="row" ng-controller="myCtrl1">
     <div class="col col-100">
          <button ng-click="broadcast()">Broadcast</button>
     </div>            
</div>
<div class="row" ng-controller="myCtrl2">
     <div class="col col-100">
          <p>{{message}}</p>
     </div>
</div>
<div class="row" ng-controller="myCtrl3">
     <div class="col col-100">
          <p>{{message}}</p>
     </div>
</div>

.controller('myCtrl1', function($rootScope, $scope) {
    $scope.broadcast = function()
    {
    	$rootScope.$broadcast("myData", "I am here");
    }
})
.controller('myCtrl2', function($scope) {
    $scope.$on("myData", function (evt, data) {
        $scope.message = data;
    });
})
.controller('myCtrl3', function($scope) {	
    $scope.$on("myData", function (evt, data) {
    	$scope.message = data;
    });

})

In the above example myCtrl1 move up the myData event to its sibling controller using $broadcast() method. $on() method handling myData event in  myCtrl2 and myCtrl3.

This is the purpose and use of $broadcast(), $emit(), $on() method. Hope this will help you :)