为什么我们要在AngularJS中使用 $rootScope.$ broadcast

$rootScope.$ broadcast用于广播一个 “全局 “事件，该事件可以被该特定作用域的任何监听器捕获。下级作用域可以通过使用 $scope.$ on来捕捉和处理这个事件。

语法:

$rootScope.$broadcast(name, args)
$scope.$on(name, listener);

参数:

listener：它用于指定事件被捕获时要调用的函数。

步骤:

创建一个ParentController，你想从它那里提出/广播一个事件。
在AngularJS中使用$rootScope.$broadcast来广播来自ParentController的事件。
创建一个ChildController或ExternalController（即不是ParentController的直接后代）来捕捉和处理该事件。
在AngularJS中使用$scope.$on来捕捉相应的事件。

例子：这个例子使用$rootScope.$broadcast来引发一个事件。

<!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, 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>