AngularJS中的$ rootScope和$ rootScope。$ emit / $ broadcast有什么區別？

Question

這是我頁面的結構。

// app.html
<wrapper ng-if="initialized && $root.user.type!='guest'">
  <header-component></header-component>
  <div class="app-body">
    <sidebar-component></sidebar-component>
    <main class="main-content" style="height:{{$root.pageHeight}}px; overflow-y: scroll">
      <ng-view></ng-view>
    </main>
    <aside-component></aside-component>
  </div>
</wrapper>

現在在ng-view指令中，我有一個控制器，該控制器需要將數據傳遞到標頭組件。 如您所見，ng-view並未以某種方式與標頭組件相關聯。

假設現在ng-view controll屏幕是：

// some-screen.js
$scope.foo = "bar";

我想在標題中顯示bar 。

我既可以使用$ rootScope（沒有任何事件）也可以使用$ broadcast事件來做到這一點。

第一種方法-直接使用$ rootScope-不包含任何內容：

// some-screen.js 
$rootScope.foo = "bar";

// header.js 
app.directive("headerComponent", ($rootScope) => {
  return {
    templateUrl: "/structure/header/header.html",
    scope: {},
    link: function($scope, element, attrs) {
      console.log($rootScope.foo) // "bar"
    }
  }
});

第二種方法-使用$ broadcast事件

// some-screen.js 
$rootScope.$emit("SomeNameOfTheEvent", $scope.foo);

// header.js 
app.directive("headerComponent", ($rootScope) => {
  return {
    templateUrl: "/structure/header/header.html",
    scope: {},
    link: function($scope, element, attrs) {
      $rootScope.$on("SomeNameOfTheEvent", function(event, info) {
        console.log(info.foo) // "bar"
      });
    }
  }
});

現在，在使用$ broadcast事件時注意兩件事：

1. 您需要為此事件指定名稱-在大型應用中這可能會很棘手-因為您可能不會記住在編碼時拋出的名稱。 坐下來想起好名字是浪費時間。 您可能需要制作文檔才能在應用程序的其他位置重用事件名稱-否則，您將錯誤地嘗試使用相同的事件但名稱錯誤。

2. 他們倆都在做同樣的事情-$ broadcast只需要更多代碼即可起作用。

我缺少的是，AngularJS可能為某事創建了$ broadcast事件。

Answer 1

$ emit向上調度事件... $ broadcast向下調度事件

詳細說明

$rootScope.$emit僅允許其他$rootScope偵聽器捕獲它。 當您不希望每個$ scope獲得它時，這很好。 主要是高層溝通。 可以將它想象為成年人在房間里互相交談，以使孩子們聽不到他們說話。

$rootScope.$broadcast是一種幾乎可以讓所有人聽到的方法。 這相當於父母大喊大叫晚飯准備好了，這樣屋子里的每個人都會聽到。

$scope.$emit是您希望該$scope及其所有父母和$rootScope聽到事件的時間。 這是一個孩子在家里向父母抱怨（但不在其他孩子可以聽到的雜貨店里）。

$scope.$broadcast用於$scope本身及其子級。 這是一個對動物毛絨玩具低語的孩子，所以他們的父母聽不到。