AngularJSアプリケーション開発ガイド

7.3

 

$on

、

$emit

、

$broadcast

を使ったスコープ間の通信

161

7.3

 

$on

、

$emit

、

$broadcast

を使ったスコープ間の通信

AngularJS

のスコープには階層的な入れ子構造が見られます。

1

つの

AngularJS

アプリケーショ

ン（つまり、

1

つの

ng-app

）ごとに、メインとなる

$rootScope

が

1

つ用意されます。他の

$scope

はすべて、このスコープを継承するか入れ子状に包含されます。しかし、

$scope

同士が互いに変

数を共有せず、プロトタイプを使った継承関係も持たない、という場合もよくあります。

このような状況で、

$scope

の間でやり取りを行うにはどうすればよいでしょうか。

1

つの方法

としては、アプリケーションの中で

1

つだけ存在するサービスを作成し、このサービスを通じて

$scope

間の通信を行うというものが考えられます。

AngularJS

では別の方法がとられており、

$scope

の中で発生するイベントを通じてやり取りが

行われています。ここには制限もあり、通常はすべての

$scope

に対してイベントを一斉通知する

ことはできません。親方向と子方向のどちらと通信を行うかについて、あらかじめ決めておく必要

があります。

この問題の詳細に踏み込む前に、イベントの監視方法について学んでおきましょう。ここでの例

では、恒星系内のすべての惑星が

planetDestroyed

というイベントを監視しているものとします。

scope.$on('planetDestroyed', function(event, ...