Skip to content
Related Articles

Related Articles

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

Improve Article
Save Article
  • Last Updated : 08 Sep, 2022
Improve Article
Save Article

The $rootScope.$broadcast is used to broadcast a “global” event that 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);

Parameter value:

  • listener: It is used to specify 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 example uses $rootScope.$broadcast to raise an event.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </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, h2,
        code {
            color: green;
        }
  
        p {
            color: green;
            display: inline-block;
        }
  
        div {
            border-color: black;
            border-style: solid;
            padding: 10px;
        }
    </style>
</head>
  
<body ng-app="app">
    <h1>GeeksforGeeks</h1>
    <h3>AngularJS $rootScope.$broadcast</h3>
    <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">
            <h2>Child Controller</h2>
            <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:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!