Why do we use $rootScope.$broadcast in AngularJS? - GeeksforGeeks

30 Jan, 2020
$rootScope.$broadcast is used to broadcast a “global” event which can be caught by any listener of that particular scope. The descendant scopes can catch and handle this event by using $scope.$on.
Syntax:
$rootScope.$broadcast(name, args)

$scope.$on(name, listener);

where listener specifies the function to call when the event is caught.
Approach:
Create a ParentController from which you would want to raise/broadcast an event.
Use $rootScope.$broadcast in AngularJS to broadcast the event from the ParentController.
Create a ChildController or an ExternalController (i.e., not a direct descendant of the ParentController) to catch and handle the event.
Use $scope.$on in AngularJS to catch the respective event.
Example: This program uses $rootScope.$broadcast to raise an event using the approach discussed above.
<!DOCTYPE html><html>  <head>    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.js">  </script>    <script type="text/javascript">        var app = angular.module('app', []);        app.controller('ParentController', function(                       $rootScope, $scope) {            $scope.broadcastMessage = function() {                $rootScope.$broadcast('newEvent', {                    message: $scope.parentMessage                });            };          });        app.controller('ChildController', function($scope) {            $scope.$on('newEvent', function(event, args) {                $scope.message = args.message;            });        });        app.controller('ExternalController', function($scope) {            $scope.$on('newEvent', function(event, args) {                $scope.message = args.message;            });        });    </script>    <style type="text/css">        h1,        code {            color: green;        }                  p {            color: green;            display: inline-block;        }                  div {            border-color: black;            border-style: solid;            padding: 10px;        }    </style></head>  <body ng-app="app">    <div ng-controller="ParentController">        <h1>Parent Controller</h1>        <input ng-model="parentMessage">        <button ng-click="broadcastMessage()">          Broadcast Message      </button>          <br>        <br>        <div ng-controller="ChildController">            <h1>Child Controller</h1>            <p>Message :</p>              <code>{{message}}</code>        </div>    </div>    <br>    <br>    <div ng-controller="ExternalController">        <h1>External Controller</h1>        <p>Message :</p>          <code>{{message}}</code>    </div></body>  </html>
Output:
AngularJS-Misc
Picked
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Angular Libraries For Web Developers
Angular PrimeNG Dropdown Component
Angular 10 (blur) Event
How to make a Bootstrap Modal Popup in Angular 9/8 ?
How to create module with Routing in Angular 9 ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Convert a string to an integer in JavaScript