Почему мы используем $rootScope. $Broadcast в AngularJS?

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

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

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

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

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

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

Ответы

Ответ 1

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

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

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

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

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

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

Ответ 2

$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)}
})

Ответ 3

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

Область корня передает событие:

$rootScope.$broadcast("myEvent");

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

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

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

Ответ 4

Что делает передача $rootScope. $?

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

Аналогично, мы имеем $rootScope. $emit, единственная разница в том, что первая также попадает в $scope. $, тогда как последняя попадает только $rootScope. $on.

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

Ответ 5

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

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

Пример:

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

$rootScope.$broadcast('status_updated', myObject);

$rootScope.$on('status_updated', function(event, obj){
    console.log(obj.status); // 10
})