用途和意義

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>