Почему мы используем трансляцию $ rootScope. $ В AngularJS?

109

Пытался найти основную информацию по AngularJS $rootScope.$broadcast, но документация по AngularJS мало помогает. Простыми словами, почему мы это используем?

Кроме того, внутри шаблона Hot Towel Джона Папы есть пользовательская функция в общем модуле с именем $broadcast:

function $broadcast() {
    return $rootScope.$broadcast.apply($rootScope, arguments);
}

Я не понял, что это делает. Итак, вот пара основных вопросов:

1) Что делает $rootScope.$broadcast?

2) В чем разница между $rootScope.$broadcastи $rootScope.$broadcast.apply?

Nexus23
источник
$rootScope.$broadcast.apply()используется, потому что если вы хотите передать специальный argumentsобъект другой функции, вам нужно использовать apply()(в отличие от call()). В дополнение к ссылке @ Blackhole на страницу MDN по запросу вы также можете проверить запись на arguments.
Скотт Шупбах

Ответы:

97
  1. Что $rootScope.$broadcastделать?

    $rootScope.$broadcastотправляет событие через область приложения. Любые дети объем этого приложения может поймать его с помощью простого: $scope.$on().

    Особенно полезно отправлять события, когда вы хотите достичь области, которая не является прямым родителем (например, ветвь родителя)

    !!! Одна вещь , чтобы не делать , однако, использовать $rootScope.$onот контроллера. $rootScopeэто приложение, когда ваш контроллер будет уничтожен, этот прослушиватель событий все еще будет существовать, а когда ваш контроллер будет создан снова, он просто накапливает больше прослушивателей событий. (Таким образом, одна трансляция будет поймана несколько раз). Используйте $scope.$on()вместо этого, и слушатели также будут уничтожены.

  2. В чем разница между $rootScope.$broadcast& $rootScope.$broadcast.apply?

    Иногда приходится пользоваться apply(), особенно при работе с директивами и другими библиотеками JS. Однако, поскольку я не знаю этой кодовой базы, я не мог бы сказать, так ли это здесь.

user1412031
источник
11
Отличный улов на $rootScope.$onутечке памяти. Это относится и к принятому ответу, так как контроллеры, скорее всего, вызовут hiEventServiceсозданный им.
adamdport
Какой пример вы бы использовали $broadcastvs.$broadcast.apply()
гость
$ rootScope. $ broadcast отправляет событие всем слушателям, а не только слушателям из дочерних областей. $ scope. $ broadcast ограничивает событие дочерними областями видимости
Герт Беллеманс,
157

$rootScope в основном функционирует как слушатель и диспетчер событий.

Чтобы ответить на вопрос о том, как он используется, он используется вместе с rootScope.$on;

$rootScope.$broadcast("hi");

$rootScope.$on("hi", function(){
    //do something
});

Однако использование в $rootScopeкачестве общей службы событий вашего собственного приложения - плохая практика , поскольку вы быстро попадете в ситуацию, когда каждое приложение зависит от $ rootScope, и вы не знаете, какие компоненты какие события прослушивают.

Лучше всего создавать службу для каждого настраиваемого события, которое вы хотите прослушивать или транслировать.

.service("hiEventService",function($rootScope) {
    this.broadcast = function() {$rootScope.$broadcast("hi")}
    this.listen = function(callback) {$rootScope.$on("hi",callback)}
})
Code Whisperer
источник
4
Спасибо @itcouldevenbeabout, разве эта строка не вызывает ту же логику присоединения события к глобальному $ rootScope? function () {$ rootScope. $ broadcast ("привет")}, что, по вашему мнению, является плохой практикой?
Nexus23,
11
Использование службы для трансляции, а также для подключения слушателей для определенного события позволяет избежать ситуации, когда вы не уверены, кто слушает. Становится ясно, какие компоненты имеют сервис событий в качестве зависимости
CoolTapes
4
Только что обнаружив разницу между $ emit и $ broadcast, я был бы склонен сказать, что было бы лучше $ emit событие - таким образом вы загрязняете событие в наименьшем возможном наборе областей (в идеале служба должна иметь это собственный прицел, но я не думаю, что это возможно?)
Брондал
3
-1. Я не понимаю, чем изоляция в сервисе лучше, чем простая трансляция. В любом случае, лучше использовать в сервисе собственную приватную область видимости. И лучше использовать $ emit, а не $ broadcast. Также предлагаемая вами услуга не поддерживает аргументы событий. Что еще хуже, он не поддерживает отмену подписки; смертный грех для $ rootScope.
alpha-mouse
3
Отсутствие подписки портит мне этот ответ. Если вы вызываете hiEventService.listen(callback)из контроллера, слушатель все еще будет существовать даже после уничтожения контроллера. Утечка памяти! Привязка к области контроллера $scope.$on("hi",callback)идет с автоматической очисткой.
adamdport
32

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

Корневая область видимости транслирует событие:

$rootScope.$broadcast("myEvent");

Любой дочерний Scope может прослушивать событие:

$scope.$on("myEvent",function () {console.log('my event occurred');} );

Почему мы используем $ rootScope. $ Broadcast? Вы можете использовать $watchдля прослушивания изменений переменных и выполнения функций при изменении состояния переменной. Однако в некоторых случаях вы просто хотите вызвать событие, которое могут прослушивать другие части приложения, независимо от любого изменения состояния переменной области. Это когда $broadcastполезно.

Джеймс Лорук
источник
19

Передача данных !!!

Интересно, почему никто не упоминает, что $broadcastпринимает параметр, в котором вы можете передать, Objectкоторый будет получен с $onпомощью функции обратного вызова

Пример:

// the object to transfert
var myObject = {
    status : 10
}

$rootScope.$broadcast('status_updated', myObject);
$scope.$on('status_updated', function(event, obj){
    console.log(obj.status); // 10
})
Мерлин
источник
8

Что делает $ rootScope. $ Broadcast?

Он транслирует сообщение соответствующим слушателям по всему приложению angular, что является очень мощным средством для передачи сообщений в области на другом иерархическом уровне (будь то родительский, дочерний или братья и сестры)

Точно так же у нас есть $ rootScope. $ Emit, с той лишь разницей, что первый также попадает в $ scope. $ On, а второй - только в $ rootScope. $ On.

см. примеры: - http://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

Прашант К
источник