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控件屏幕为：

// 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事件时注意两件事：

您需要为此事件指定名称-在大型应用中，这可能很棘手-因为您可能不会记住在编码时抛出的名称。坐下来想起好名字是浪费时间。您可能需要制作文档才能在其他地方重用事件名称在应用程序中-否则，您将错误地尝试使用相同的事件但名称错误。
他们都在做同样的事情-$ broadcast只是需要更多代码才能起作用。

我想念的是，AngularJS可能为某件事创建了$ broadcast事件。

Answer 1

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

详细说明

$rootScope.$emit仅允许其他$rootScope侦听器捕获它。当您不希望每个$ scope获得它时，这很好。主要是高层沟通。把它想象成成年人在房间里互相交谈，使孩子们听不到他们的声音。

$rootScope.$broadcast是一种几乎可以让所有人听到的方法。这相当于父母大喊大叫晚饭准备好了，这样屋子里的每个人都能听到。

$scope.$emit是您希望$scope及其所有父母和$rootScope听到事件的时间。这是一个孩子在家里向父母抱怨（但不在其他孩子可以听到的杂货店里）。

$scope.$broadcast用于$scope本身及其子元素。这是一个对动物毛绒玩具低语的孩子，所以他们的父母听不到。

AngularJS中的$ rootScope和$ rootScope。$ emit / $ broadcast有什么区别？

1 个答案: