Почему мы используем $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
})