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 在某种程度上与 header-component 没有关联。

假设 ng-view controll now screen 是：

// 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 本身及其子项。这是一个孩子对它的毛绒玩具耳语，这样他们的父母就听不到了。