用途和意义

Created: November-22, 2018

这些事件可用于在 2 个或更多控制器之间进行通信。

$emit 通过范围层次结构向上调度事件，而 $broadcast 向下调度一个事件到所有子范围。这里已经很好地解释了。

在控制器之间进行通信时，基本上可以有两种类型的场景：

当控制器具有父子关系时。（在这种情况下我们大多使用 $scope）
当控制器彼此不独立并且需要被告知彼此的活动时。（在这种情况下我们可以使用 $rootScope）

例如： 对于任何电子商务网站，假设我们有 ProductListController（在点击任何产品品牌时控制产品列表页面）和 CartController（管理购物车项目）。现在，当我们点击添加到购物车按钮时，它也必须通知 CartController，以便它可以反映网站导航栏中的新购物车项目数量/详细信息。这可以使用 $rootScope 来实现。

随着 $scope.$emit

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
    <script>
        var app = angular.module('app', []);

        app.controller("FirstController", function ($scope) {
            $scope.$on('eventName', function (event, args) {
                $scope.message = args.message;
            });
        });

        app.controller("SecondController", function ($scope) {
            $scope.handleClick = function (msg) {
                $scope.$emit('eventName', {message: msg});
            };
        });

    </script>
  </head>
  <body ng-app="app">
    <div ng-controller="FirstController" style="border:2px ;padding:5px;">
        <h1>Parent Controller</h1>
        <p>Emit Message : {{message}}</p>
        <br />
        <div ng-controller="SecondController" style="border:2px;padding:5px;">
            <h1>Child Controller</h1>
            <input ng-model="msg">
            <button ng-click="handleClick(msg);">Emit</button>
        </div>
    </div>
  </body>
</html>

与 $scope.$broadcast：

<html>
  <head>
    <title>Broadcasting</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
    <script>
        var app = angular.module('app', []);

        app.controller("FirstController", function ($scope) {
            $scope.handleClick = function (msg) {
                $scope.$broadcast('eventName', {message: msg});
            };

        });

        app.controller("SecondController", function ($scope) {
            $scope.$on('eventName', function (event, args) {
                $scope.message = args.message;
            });
        });

    </script>
  </head>
  <body ng-app="app">
    <div ng-controller="FirstController" style="border:2px solid ; padding:5px;">
        <h1>Parent Controller</h1>
        <input ng-model="msg">
        <button ng-click="handleClick(msg);">Broadcast</button>
        <br /><br />
        <div ng-controller="SecondController" style="border:2px solid ;padding:5px;">
            <h1>Child Controller</h1>
            <p>Broadcast Message : {{message}}</p>
        </div>
    </div>
  </body>
</html>