なぜAngularJSで$ rootScope。$ broadcastを使用するのですか?


109

AngularJSのいくつかの基本情報を見つけようとしましたが$rootScope.$broadcast、AngularJSのドキュメントはあまり役に立ちません。簡単に言えば、なぜこれを使用するのですか?

また、John PapaのHot Towelテンプレート内には、次の名前の共通モジュールにカスタム関数があります$broadcast

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

これが何をしているのか理解できませんでした。だからここにいくつかの基本的な質問があります:

1)何をし$rootScope.$broadcastますか?

2)との違いは何ですか$rootScope.$broadcastとは$rootScope.$broadcast.apply




$rootScope.$broadcast.apply()特別なargumentsオブジェクトを別の関数に渡したい場合はapply()(とは対照的にcall())を使用する必要があるためです。@BlackholeのMDNページへの申請のリンクに加えて、のエントリも確認してくださいarguments
Scott Schupbach、2016

回答:


97
  1. 何をし$rootScope.$broadcastますか?

    $rootScope.$broadcastアプリケーションスコープを介してイベントを送信しています。そのアプリのすべての子スコープは、単純なを使用してそれをキャッチできます$scope.$on()

    直接の親ではないスコープ(たとえば、親のブランチ)に到達したい場合にイベントを送信すると特に便利です。

    !!! ただし、コントローラーから使用することはできません$rootScope.$on$rootScopeアプリケーションです。コントローラーが破棄されても、そのイベントリスナーは引き続き存在し、コントローラーが再度作成されると、さらに多くのイベントリスナーが積み上げられます。(したがって、1つのブロードキャストが複数回キャッチされます)。$scope.$on()代わりに使用すると、リスナーも破棄されます。

  2. $rootScope.$broadcast&はどう違い$rootScope.$broadcast.applyますか?

    apply()特にディレクティブや他のJSライブラリを操作する場合は、を使用する必要がある場合があります。ただし、そのコードベースがわからないので、ここに当てはまるかどうかはわかりません。


11
$rootScope.$onメモリリークの大漁。コントローラはhiEventService彼が作成したものを呼び出す可能性が高いため、これは受け入れられた回答にも当てはまります。
adamdport 2015年

あなたが使用する例は何である$broadcast対を$broadcast.apply()
ゲスト

$ rootScope。$ broadcastは、子スコープのリスナーだけでなく、すべてのリスナーにイベントを送信します。$ scope。$ broadcastはイベントを子スコープに制限します
Geert Bellemans 2017年

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

4
ありがとう@itcouldevenbeaboutこの行は、イベントをグローバル$ rootScopeにアタッチするのと同じロジックを呼び出していませんか?function(){$ rootScope。$ broadcast( "hi")}、あなたが言ったのは悪い習慣ですか?
Nexus23、2014

11
サービスを使用してブロードキャストを行い、特定のイベントのリスナーをアタッチすると、誰が聞いているかわからない状況を回避できます。イベントサービスが依存関係にあるコンポーネントが明らかになる
CoolTapes '18 / 11/14

4
$ emitと$ broadcastの違いを発見したので、イベントを$ emitするほうがよいと言いたくなるでしょう。そうすれば、イベントは可能な限り最小のスコープセットで汚染されます(理想的には、サービスはそれは独自のスコープですが、可能ではないと思いますか?)
Brondahl

3
-1。サービスの分離が、単にブロードキャストすることよりも優れていることはわかりません。とにかく、サービスでは独自のプライベートスコープを使用する方が適切です。また、$ broadcastではなく、$ emitを使用してください。また、提案されたサービスはイベント引数をサポートしていません。さらに悪いことに、サブスクリプション解除をサポートしていません。$ rootScopeの大罪。
alpha-mouse

3
サブスクリプション解除の欠如は私にとってこの答えを台無しにします。hiEventService.listen(callback)コントローラから呼び出した場合、コントローラが破棄された後もリスナーは存在し続けます。メモリーリーク!コントローラスコープへのバインドに$scope.$on("hi",callback)は、自動クリーンアップが付属しています。
adamdport 2015年

32

$ rootScope。$ broadcastは、すべての子スコープがリッスンできる「グローバル」イベントを発生させる便利な方法です。$rootScopeすべての子孫スコープがメッセージをリッスンできるため、メッセージのブロードキャストにのみ使用する必要があります。

ルートスコープはイベントをブロードキャストします。

$rootScope.$broadcast("myEvent");

子スコープはすべてイベントをリッスンできます。

$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/

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.