$ rootScope。$ broadcastと$ scope。$ emit

今の性能差ということ$broadcastとが$emit排除されている、好むために何らかの理由がある$scope.$emitには$rootScope.$broadcast？

はい、そうです。

$emit スコープ階層（上向き）に制限されています-これは、設計に適合している場合は良いかもしれませんが、かなり恣意的な制限のようです。

$rootScope.$broadcastイベントに耳を傾けることを選択するすべての人に働きかけます。これは私の心の中でより賢明な制限です。

何か不足していますか？

編集：

答えを明確にするために、発送の方向は私が求めている問題ではありません。$scope.$emitイベントを上方向、および$scope.$broadcast下方向にディスパッチします。しかし、なぜ$rootScope.$broadcastすべての意図されたリスナーに到達するために常に使用しないのですか？

tl; dr （このtl; drは以下の@ sp00mの回答からのものです）

$emitイベントを上にディスパッチします... $broadcastイベントを下にディスパッチします

詳細説明

$rootScope.$emit他の$rootScopeリスナーだけがそれをキャッチできるようにします。これは、すべての人$scopeに取得させたくない場合に適しています。主に高レベルのコミュニケーション。大人が部屋で互いに話しているので、子供が聞こえないように考えてください。

$rootScope.$broadcastほとんどすべてがそれを聞くことができる方法です。これは、夕食の準備ができているので、家の誰もがそれを聞くと親が叫ぶのと同じです。

$scope.$emitあなたがそれ$scopeとそのすべての親を望み$rootScope、イベントを聞きたいときです。これは、自宅で両親に向かって泣き言を言う子供です（ただし、他の子供が聞くことができる食料品店ではありません）。

$scope.$broadcast用で$scope、それ自体とその子。これは、ぬいぐるみをささやく子供で、両親には聞こえません。

それらは同じ仕事をしていません。すべての子スコープにイベントを下向きにディスパッチする一方で、スコープ階層を通じて$emitイベントを上向きに$broadcastディスパッチします。

次のリンクから次のグラフィックを作成しました：https : //toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

ご覧のとおり、$rootScope.$broadcastはよりも多くのリスナーをヒットしています$scope.$emit。

また、$scope.$emitバブリング効果はキャンセルできますがキャンセル$rootScope.$broadcastできません。

$ scope。$ emit：このメソッドは、イベントを上方向（子から親へ）にディスパッチします

$ scope。$ broadcast：メソッドは、イベントを下方向（親から子）にすべての子コントローラーにディスパッチします。

$ scope。$ on：メソッドは、イベントをリッスンするために登録します。そのイベントをリッスンしているすべてのコントローラーは、ブロードキャストの通知を受け取るか、子と親の階層のどこに適合するかに基づいて放出します。

$ emitイベントは、イベントをリッスンしている$ scopeのいずれかによってキャンセルできます。

$ onは「stopPropagation」メソッドを提供します。このメソッドを呼び出すことにより、イベントがそれ以上伝播しないようにすることができます。

プランカー：https ://embed.plnkr.co/0Pdrrtj3GEnMp2UpILp4/

兄弟スコープ（直接の親子階層にないスコープ）の場合、$ emitと$ broadcastは兄弟スコープと通信しません。

詳細については、http：//yogeshtutorials.blogspot.in/2015/12/event-based-communication-between-angularjs-controllers.htmlを参照してください。

@Eddieは、質問の完全な回答を提供しました。しかし、Pub / Subのより効率的なアプローチの使用に注意を向けたいと思います。

同様に、この答えは示唆しています、

$ broadcast / $ onアプローチは、すべてのスコープにブロードキャストするので（スコープ階層の一方または両方の方向に）非常に効率的ではありません。一方、Pub / Subのアプローチはより直接的です。サブスクライバーだけがイベントを取得するため、システム内のすべてのスコープでイベントが機能するわけではありません。

angular-PubSub角度モジュールを使用できます。PubSubアプリの依存関係にモジュールを追加すると、PubSubサービスを使用してイベント/トピックをサブスクライブおよびサブスクライブ解除できます。

簡単に登録：

// Subscribe to event
var sub = PubSub.subscribe('event-name', function(topic, data){

});

公開が簡単

PubSub.publish('event-name', {
    prop1: value1,
    prop2: value2
});

退会するには、PubSub.unsubscribe(sub);ORを使用しますPubSub.unsubscribe('event-name');。

注意メモリリークを回避するために、サブスクライブ解除を忘れないでください。

サービスでRxJSを使用する

たとえば、サービスが状態を保持している状況ではどうでしょうか。そのサービスへの変更をプッシュするにはどうすればよいですか。また、ページ上の他のランダムコンポーネントはそのような変更を認識できますか？最近この問題に取り組むことに苦労している

Angular用のRxJS拡張を使用してサービスを構築します。

<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/rx/dist/rx.all.js"></script>
<script src="//unpkg.com/rx-angular/dist/rx.angular.js"></script>

var app = angular.module('myApp', ['rx']);

app.factory("DataService", function(rx) {
  var subject = new rx.Subject(); 
  var data = "Initial";

  return {
      set: function set(d){
        data = d;
        subject.onNext(d);
      },
      get: function get() {
        return data;
      },
      subscribe: function (o) {
         return subject.subscribe(o);
      }
  };
});

次に、単に変更をサブスクライブします。

app.controller('displayCtrl', function(DataService) {
  var $ctrl = this;

  $ctrl.data = DataService.get();
  var subscription = DataService.subscribe(function onNext(d) {
      $ctrl.data = d;
  });

  this.$onDestroy = function() {
      subscription.dispose();
  };
});

クライアントはで変更をサブスクライブできDataService.subscribe、プロデューサーはで変更をプッシュできますDataService.set。

PLNKR上のDEMO。