web-dev-qa-db-ja.com

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

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の違いは何ですか？

angularjsrootscope
101
Nexus23

  1. $rootScope.$broadcastは何をしますか？

    $rootScope.$broadcastはアプリケーションスコープを通じてイベントを送信しています。そのアプリのどの子供の範囲でも、単純な$scope.$on()を使ってそれをキャッチすることができます。

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

    !!! しないでくださいすることの一つはコントローラから$rootScope.$onを使うことです。 $rootScopeはアプリケーションです。あなたのコントローラが破壊されてもそのイベントリスナはまだ存在します、そしてあなたのコントローラが再び作成されるときそれはただもっと多くのイベントリスナを積み上げるでしょう。 （つまり、1回の放送が複数回キャッチされます）。代わりに$scope.$on()を使用すると、リスナーも破棄されます。

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

    特にディレクティブや他のJSライブラリを扱うときは、apply()を使わなければならないことがあります。しかし、そのコードベースがわからないので、それがここに当てはまるかどうかを判断することはできません。

85
user1412031

$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)}
})
154
Code Whisperer

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

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

$rootScope.$broadcast("myEvent");

どの子スコープでもイベントをリッスンできます：

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

なぜ私たちは$ rootScopeを使用します。$ broadcast？変数の変化を監視し、変数の状態が変化したときに関数を実行するために$watchを使用することができます。ただし、場合によっては、スコープ変数の状態の変化に関係なく、単にアプリケーションの他の部分がリスンできるイベントを発生させるだけです。 $broadcastが役に立つ時です。

32
James Lawruk

データを渡しています！

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

$ rootScope。$ broadcastは何をしますか？

これは、角度のあるアプリケーション全体でそれぞれのリスナーにメッセージをブロードキャストします。これは、メッセージをさまざまな階層レベル（親、子、兄弟など）のスコープに転送するための非常に強力な手段です。

同様に、$ rootScope。$ emitがありますが、唯一の違いは前者が$ scope。$ onで捕捉されるのに対し、後者は$ rootScope。$ onで捕捉されるだけです。

例を参照してください。 - http://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

8
Prashant K