スコープのイベント
続いてスコープのイベント処理について説明します。イベントは、直接参照できないスコープや、一度に複数のスコープとデータを連携したい場合になどに使えます。
サンプルアプリケーションでは、データの追加や削除があった場合に一覧データを更新するために使っています。
AngularJSでは、$scopeのイベントを処理するために、表2のような3つのメソッドが用意されています。
| 関数名 | 説明 |
|---|---|
| $scope.broadcast(name , ...args ) | 自分自身から下位（子）方向にイベントを通知する |
| $scope.emit(name , ...args ) | 自分自身から上位（親）方向にイベントを通知する |
| $scope.on ( name , listener ) | イベントを受け取った際に処理をする |
イベント伝播には方向があり、先ほど紹介したスコープの親子関係に従い伝播するようになっています。それらの伝播の方向は図4のようになります。
リスト7は、この機能を利用しほかのコントローラに対して処理イベントを通知するためのサンプルコードです。
module.controller('listController',function($scope){
// : 省略
$scope.$on('changeItems',function(){ // （1） 'changeItem'イベントを受け取る
alert('一覧が更新されました');
});
});
module.controller('addController',function($scope){
$scope.addItem = function(){
// : 省略
$scope.$root.$broadcast('changeItems'); （2） // 'changeItem'イベントを通知する
// : 省略
}
});
（1）では、一覧表示であるlistControllerでの$scopeオブジェクトに対して、"changeItems"イベントを取得した際に一覧情報を更新します。ただし、現在はalert関数を実行していますが、実装は次回説明します。
（2）では、データを追加するaddControllerのaddItemメソッドの中で、$rootScope（$cope.$root）に対して、$broadcastメソッドを使ってイベントを発生させます。$broadcastメソッドは親から子へと伝播していきますので、基本的にはすべてのコントローラの$scopeで取得可能になります。
最後に
今回は、AngularJSでのデータ連携の肝となるスコープについて説明を行いました。素のJavaScriptコードの記述に慣れていると、AngularJSのデータバインディングなどは多少の不思議さを感じる部分があります。
筆者も、既存のJavaScriptのライブラリと組み合わせてAngularJSを使ったときに、この問題にぶつかりました。AngularJSのみで作成する簡単なサンプルでは問題なく実装ができても、実際の利用となると使えない原因の一つとなりえる機能だと思います。従って、よくわからなくても何となくできてしまう部分があるかもしれません。
それこそがフレームワークを使う上でのメリットの1つでもあります。同時に、フレームワークの弊害でもあります。多少気持ちが悪いかも知れませんが、その部分を気にとめながらもそのまま利用してみてください。気になっている部分の霧が晴れたときには、さらにそのフレームワークの奥深さや便利さが別の視点で理解できるようになることと思います。
次回は、実際のデータ管理を行うサービスの説明と実装をしていきます。
