AngularJS $on, $emit and $broadcast usage

The scope in AngularJS has a very hierarchical and well-nested structure. They all have a main $rootScope (that is, the corresponding Angular application or ng-app), and then all other scope parts are inherited from this $rootScope, or they are nested under the main scope. Many times, you will find that these scopes do not share variables or inherit anything from another prototype.

So in this case, how do you communicate between scopes? One option is to create a singleton service in the application scope and then handle communications for all subscopes through this service.

There is another option in AngularJS: handle communications through events in scope. But this approach has some limitations; for example, you cannot widely spread events to the scope of all monitoring. You must choose whether to communicate with the parent scope or child scope.

$on, $emit and $broadcast make the transfer of event and data between controllers simple.

1. $emit can only pass event and data to parent controller
2. $broadcast can only pass event and data to child controller
3. $on is used to receive event and data

Examples are as follows

html code

 <div ng-controller="ParentCtrl"> <!--parent--> <div ng-controller="SelfCtrl"> <!--self--> <a ng-click="click()">click me</a> <div ng-controller="ChildCtrl"></div> <!--child--> </div> <div ng-controller="BroCtrl"></div> <!--parent--></div>

js code

 app.controller('SelfCtrl', function($scope) { $scope.click = function () { $scope.$broadcast('to-child', 'child'); $scope.$emit('to-parent', 'parent'); }});app.controller('ParentCtrl', function($scope) { $scope.$on('to-parent', function(event,data) { console.log('ParentCtrl', data); //The parent can get the value}); $scope.$on('to-child', function(event,data) { console.log('ParentCtrl', data); //The child cannot get the value});});app.controller('ChildCtrl', function($scope){ $scope.$on('to-child', function(event,data) { console.log('ChildCtrl', data); //The child can get the value}); $scope.$on('to-parent', function(event,data) { console.log('ChildCtrl', data); //The parent cannot get the value});});app.controller('BroCtrl', function($scope){ $scope.$on('to-parent', function(event,data) { console.log('BroCtrl', data); //The value is not obtained by the level}); $scope.$on('to-child', function(event,data) { console.log('BroCtrl', data); //The value is not obtained by the level}); });

Final result

ParentCtrl parent

ChildCtrl child

$emit and $broadcast can pass multiple parameters, and $on can also receive multiple parameters.

The event event parameter in the $on method, its object properties and methods are as follows

It feels much more convenient than the service communication in different controllers~~

The above is a compilation of information on AngularJS $on, $emit and $broadcast. We will continue to add relevant information in the future. Thank you for your support for this site!