В чем разница между трансляцией $ rootScope и $ rootScope. $ Emit / $ в AngularJS? - PullRequest
Новая
       7

В чем разница между трансляцией $ rootScope и $ rootScope. $ Emit / $ в AngularJS?

0 голосов
/ 04 ноября 2018

Это структура моей страницы. 

// 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 у меня есть контроллер, который должен передавать данные компоненту header. Как видите, ng-view каким-то образом не связан с компонентом header.

Скажем, теперь экран управления 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:

  1. Вам нужно указать имя для этого события - в большом приложении это может быть сложно - так как Вы, вероятно, не будете помнить имена, которые вы бросаете во время кодирования. А сидеть и думать о хороших именах - пустая трата времени. Вам, вероятно, нужно будет сделать документацию, чтобы повторно использовать имя события из других мест в приложении - в противном случае вы по ошибке попытаетесь использовать то же событие, но с неправильными именами.

  2. Они оба делают одно и то же - $ broadcast просто требует больше кода для работы.

Что мне не хватает, возможно, AngularJS создал событие $ broadcast для чего-то.

1 Ответ

0 голосов
/ 04 ноября 2018

$ emit отправляет событие вверх ... $ broadcast отправляет событие вниз * * 1002

Подробное объяснение

$rootScope.$emit позволяет только другим $rootScope слушателям ловить его. Это хорошо, когда вы не хотите, чтобы все $ scope получали его. В основном общение высокого уровня. Думайте об этом как о взрослых, разговаривающих друг с другом в комнате, чтобы дети их не слышали.

$rootScope.$broadcast - это метод, который позволяет почти всем слышать это. Это было бы равносильно тому, что родители кричат, что ужин готов, поэтому все в доме его слышат.

$scope.$emit - это когда вы хотите, чтобы $scope и все его родители и $rootScope услышали событие. Это ребенок, который ныет родителям дома (но не в продуктовом магазине, где другие дети могут слышать).

$scope.$broadcast для самого $scope и его детей. Это ребенок шепчет своим чучелам, чтобы их родители не могли слышать.

...