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本身及其子级。 这是一个对动物毛绒玩具低语的孩子，所以他们的父母听不到。