AngularJSのスコープの仕組み、$rootScopeを使ってイベントを伝播

AngularJSのスコープの仕組みについてまとめ、$rootScopeを使ってイベントを伝播する方法を確認しました。

デモとコードサンプルはこちら
 
※目次をクリックすると目次の下部にコンテンツが表示されます。

スコープの概要
スコープの$watch、$digest、$applyについては下記記事参照。
$watch、$digest、$applyの概要
 
1)概要
 
・スコープはアプリケーションのモデルを参照するオブジェクトで、アプリケーションコントローラとビューの間を結びつける。
 
・スコープはexpressionをウォッチし、イベントを伝播する。
 
・スコープの$watchメソッドでモデルの変化を監視できる。
 
・スコープの$applyメソッドでAngularアプリの外部からビューにモデルの更新を伝播できる。
 
・スコープはネストしてアクセス範囲を制限することもできれば、共有する事も出来る。
 {{name}}などのexpressionを評価するとき、該当要素のスコープ最初に確認し、無い場合はスコープの階層の上位を順番にルートスコープまで探す。
 
・ネストされたスコープは子スコープまたはisolateスコープとなる。
 
・子スコープは、親スコープから属性を継承するが、isolateスコープは継承しない。
 
・スコープはexpressionが評価されたものに対してコンテキストを提供する。
 
2)DOMとスコープ
 
・スコープは、DOMに$scopeデータ属性としてDOMに割り当てられる。

・ルートスコープがDOMのどの要素に割り当てられるかはng-appディレクティブの位置によって定義される。
 通常はng-appディレクティブは<html>要素に記述されるが他の要素にも置くことが出来る。
 
3)スコープでイベントを伝播
  
①$on(name, listener)
 
指定されたタイプのイベントをリッスンする。
 
・name:イベントの名前
・listener:イベントが発行されたときに実行される関数
 
②$emit(name, args)
 
スコープ階層の親の方向へイベント伝播
 
・name:イベントの名前
 
③$broadcast(name, args)
 
スコープ階層の子供の方向へイベントを伝播
 
4)デバッガーでスコープを調べる方法
 
①ブラウザ上の調べたい要素上で右クリック押下し、「要素を調査」をクリック。
選択した場所がハイライトされた状態でブラウザデバッガーが表示される。
 
②「コンソール」タブをクリック。
 
③コンソールでangular.element($0).scope()を実行する。
・現在選択している要素にアクセスするには”$0″を指定。
・その要素に関連するスコープにアクセスするにはangular.element().scope()を実行。

スコープとディレクティブ
1){{expression}}のような監視ディレクティブ
 
・$watch()メソッドを使ってリスナーを登録。
・expressionが変化するたびに通知される必要があり、それによってビューを更新できる。
 
2)ng-clickのようなリスナーディレクティブ
 
・DOMと共にリスナーを登録。
・DOMリスナーが検知すると、そのディレクティブは指定されたexpressionを実行し、$apply()メソッドを使ってビューを更新する。
 
3)スコープを生成するディレクティブ
 
・たいていの場合はディレクティブとスコープは関連しあうが、スコープの新しいインスタンスを作成しない。
 
・ng-controllerやng-repeatなどの一部のディレクティブは新しい子スコープを生成し、その子スコープを対応するDOM要素に割り当てる。
 
●ng-controllerディレクティブ
 
・コントローラのクラスをビューに割り当てる。
 
・MVCのうちのモデルがスコープの属性で、スコープはDOMに割り当てられる。スコープの属性はバインディングでアクセスする。
 
・ng-controllerは新しい子スコープを生成する。
 
●ng-repeatディレクティブ
 
・コレクションの各項目ごとにテンプレートをインスタンス化する。
 
・それぞれのテンプレートインスタンスは、固有の子スコープを割り当てられる。

ルートスコープ
1)ルートスコープの概要
 
・すべてのAngularJSアプリは一つのルートスコープを持っているので、ルートスコープを使って複数のコントローラ間で情報をやり取りすることが出来る。
 
・$rootScopeサービスとして提供されているので、利用するときには依存性の引数に$rootScopeを指定する。
 
・$broadcast(name, args)、$emit(name, args)、$on(name, handler)メソッドを使ってイベントの送受信を行う事が出来る。
 
2)$rootScopeを使ってコントローラ間でデータをやり取りするサンプル
 
デモとコードサンプルはこちら

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください