Warum verwenden wir $ rootScope. $ Broadcast in AngularJS?

109

Es wurde versucht, einige grundlegende Informationen für AngularJS zu finden $rootScope.$broadcast, aber die AngularJS-Dokumentation hilft nicht viel. In einfachen Worten, warum verwenden wir das?

Außerdem gibt es in John Papas Hot Towel- Vorlage eine benutzerdefinierte Funktion im allgemeinen Modul mit dem Namen $broadcast:

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

Ich habe nicht verstanden, was das tut. Hier sind einige grundlegende Fragen:

1) Was macht $rootScope.$broadcast?

2) Was ist der Unterschied zwischen $rootScope.$broadcastund $rootScope.$broadcast.apply?

Nexus23
quelle
$rootScope.$broadcast.apply()wird verwendet, weil Sie (im Gegensatz zu ) verwenden müssen, wenn Sie das spezielle argumentsObjekt an eine andere Funktion übergeben möchten . Zusätzlich zu @ Blackholes Link zur MDN-Seite zum Anwenden können Sie auch den Eintrag am überprüfen . apply()call()arguments
Scott Schupbach

Antworten:

97
  1. Was macht $rootScope.$broadcastdas

    $rootScope.$broadcastsendet ein Ereignis über den Anwendungsbereich. Jeder untergeordnete Bereich dieser App kann sie mit einem einfachen : $scope.$on().

    Es ist besonders nützlich, Ereignisse zu senden, wenn Sie einen Bereich erreichen möchten, der kein direktes übergeordnetes Element ist (z. B. ein Zweig eines übergeordneten Elements).

    !!! Eine Sache, die Sie jedoch nicht tun sollten, ist die Verwendung $rootScope.$onvon einem Controller aus. $rootScopeist die Anwendung, wenn Ihr Controller zerstört wird, dass der Ereignis-Listener noch vorhanden ist, und wenn Ihr Controller erneut erstellt wird, werden nur mehr Ereignis-Listener angehäuft. (Eine Sendung wird also mehrmals abgefangen). Verwenden Sie $scope.$on()stattdessen, und die Hörer werden ebenfalls zerstört.

  2. Was ist der Unterschied zwischen $rootScope.$broadcast& $rootScope.$broadcast.apply?

    Manchmal müssen Sie verwenden apply(), insbesondere wenn Sie mit Direktiven und anderen JS-Bibliotheken arbeiten. Da ich diese Codebasis jedoch nicht kenne, kann ich nicht sagen, ob dies hier der Fall ist.

user1412031
quelle
11
Toller Fang beim $rootScope.$onSpeicherverlust. Dies gilt auch für die akzeptierte Antwort, da Controller wahrscheinlich die von hiEventServiceihm erstellte Antwort aufrufen .
Adamdport
Was ist ein Beispiel, wo Sie $broadcastgegen$broadcast.apply()
Gast
$ rootScope. $ Broadcast sendet das Ereignis an alle Listener, nicht nur an Listener aus untergeordneten Bereichen. $ scope. $ Broadcast beschränkt das Ereignis auf untergeordnete Bereiche
Geert Bellemans
157

$rootScope fungiert grundsätzlich als Ereignis-Listener und Dispatcher.

Um die Frage zu beantworten, wie es verwendet wird, wird es in Verbindung mit verwendet rootScope.$on;

$rootScope.$broadcast("hi");

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

Es ist jedoch eine schlechte Praxis, sie $rootScopeals allgemeinen Ereignisdienst Ihrer eigenen App zu verwenden, da Sie schnell in eine Situation geraten, in der jede App von $ rootScope abhängt und Sie nicht wissen, welche Komponenten welche Ereignisse abhören.

Am besten erstellen Sie einen Dienst für jedes benutzerdefinierte Ereignis, das Sie anhören oder senden möchten.

.service("hiEventService",function($rootScope) {
    this.broadcast = function() {$rootScope.$broadcast("hi")}
    this.listen = function(callback) {$rootScope.$on("hi",callback)}
})
Code Whisperer
quelle
4
Danke @itcouldevenbeabout Ruft diese Zeile nicht dieselbe Logik zum Anhängen eines Ereignisses an das globale $ rootScope auf? function () {$ rootScope. $ Broadcast ("hi")}, die Sie erwähnt haben, ist eine schlechte Praxis?
Nexus23
11
Durch die Verwendung eines Dienstes zum Erstellen der Sendungen und zum Anhängen der Listener für ein bestimmtes Ereignis wird die Situation vermieden, in der Sie nicht sicher sind, wer zuhört. Es wird klar, welche Komponenten den Ereignisdienst als Abhängigkeit haben
CoolTapes
4
Nachdem ich gerade den Unterschied zwischen $ emit und $ Broadcast entdeckt habe, würde ich gerne sagen, dass es besser wäre, $ das Ereignis auszusenden - auf diese Weise verschmutzen Sie das Ereignis in einem möglichst kleinen Bereich (idealerweise hätte der Dienst dies getan) Es ist ein eigener Bereich, aber ich denke nicht, dass das möglich ist?)
Brondahl
3
-1. Ich verstehe nicht, wie gut Isolation in einem Dienst ist, als nur zu senden. Verwenden Sie auf jeden Fall den eigenen privaten Bereich im Service. Und verwenden Sie besser $ emit und nicht $ Broadcast. Auch Ihr vorgeschlagener Dienst unterstützt keine Ereignisargumente. Was noch schlimmer ist, es wird keine Abmeldung unterstützt. eine Todsünde für $ rootScope.
Alpha-Maus
3
Das Fehlen einer Abmeldung ruiniert diese Antwort für mich. Wenn Sie hiEventService.listen(callback)von einem Controller aus anrufen , bleibt der Listener auch nach der Zerstörung des Controllers bestehen. Speicherleck! Die Bindung an den Controller-Bereich $scope.$on("hi",callback)erfolgt mit einer automatischen Bereinigung.
Adamdport
32

$ rootScope. $ Broadcast ist eine bequeme Möglichkeit, ein "globales" Ereignis auszulösen , auf das alle untergeordneten Bereiche warten können. Sie müssen nur $rootScopezum Senden der Nachricht verwenden, da alle untergeordneten Bereiche darauf warten können.

Der Root-Bereich sendet das Ereignis:

$rootScope.$broadcast("myEvent");

Jeder untergeordnete Bereich kann auf das Ereignis hören:

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

Warum verwenden wir $ rootScope. $ Broadcast? Sie können $watchauf Variablenänderungen warten und Funktionen ausführen, wenn sich der Variablenstatus ändert. In einigen Fällen möchten Sie jedoch einfach ein Ereignis auslösen, auf das andere Teile der Anwendung warten können, unabhängig von einer Änderung des Status der Bereichsvariablen. Dies ist, wenn $broadcasthilfreich ist.

James Lawruk
quelle
19

Daten weitergeben !!!

Ich frage mich, warum niemand erwähnt, dass $broadcastein Parameter akzeptiert wird, bei dem Sie einen übergeben können Object, der $onmithilfe einer Rückruffunktion empfangen wird

Beispiel:

// 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
})
Merlin
quelle
8

Was macht $ rootScope. $ Broadcast?

Es sendet die Nachricht an die jeweiligen Listener in der gesamten Winkel-App. Dies ist ein sehr leistungsfähiges Mittel, um Nachrichten an Bereiche auf verschiedenen Hierarchieebenen (Eltern, Kind oder Geschwister) zu übertragen.

In ähnlicher Weise haben wir $ rootScope. $ Emit. Der einzige Unterschied besteht darin, dass Ersteres auch von $ scope. $ On erfasst wird, während Letzteres nur von $ rootScope erfasst wird. $ On.

Beispiele finden Sie unter: - http://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

Prashant K.
quelle