angular イベントリスナー, 組み込みイベント

フロントエンドフレームワークの場合、イベントといえばマウスのクリックやページのスクロールといったDOMイベントをイメージしがちです。しかし、angularのイベントはDOMイベントと同じものではありません。

イベントの投稿

イベントを公開するには、$emit() と $broadcast() を使用します。

$emit(name, args)

name は投稿されたイベントの名前です。

args は、イベントのリスナーにオブジェクトとして渡されます。

emit() によって投稿されたイベントは、子スコープから親スコープにバブルアップされ、イベントを生成したスコープより上位のすべてのスコープにイベントが通知されます。

$broadcast(name, args)

emitと同様、nameはイベントの名前、argsはリスナーが受け入れる引数です。このメソッドによるイベントの伝搬は、上から下へ、つまり親スコープから子スコープへの伝搬となります。

イベントのリスニング

イベントが公開されたので、そのイベントに応答するためにイベントをリッスンするサービスを登録する必要があります

イベントは、$on() メソッドによってイベントをリッスンするように登録することができます。

スコープ.$on(名前、リスナーFn)

listenerFn イベントは、name をイベント名とするイベントが発生したときに実行されます。

$on()は、リスナーをキャンセルするために使用することができる逆登録関数を返します。

イベントオブジェクト

すべてのイベントリスナーの最初のパラメータは、イベントオブジェクトを表し、以下のプロパティを持ちます。

targetScope スコープオブジェクト、送信されたイベントのスコープ

currentScope: イベントを現在処理しているスコープ

name:現在のイベントのイベント名

stopPropagation:$emitによって引き起こされたイベントのさらなる伝播をキャンセルします。

preventDefaul: defaultPreevented フラグを true に設定し、サブスコープに、それ無しでもイベントを処理できることを伝えます。

defaultPreevented: ブール値

angular組み込みイベント

IncludeContentLoaded ($emit イベント)

ngInclude コンテンツが再読み込みされたときに ngInclude ディレクティブからトリガーされます。

インクルードコンテンツリクエスト ($emit イベント)

ngInclude が呼び出されたスコープから送信され、このイベントは ngInclude のコンテンツが要求されるたびに投稿されます。

viewContentLoaded ($emit イベント)

ngViewのコンテンツがリロードされたときにngViewスコープからポストします。

$locationChangeStart($broadcast event)

locationChangeStart イベントは、$location サービスを経由してブラウザのアドレスが更新されたときに発生します。

$locationChangeSuccess($broadcast event)

ブラウザのアドレスが正常に変更されたときにトリガーされる

ルート変更開始($broadcast event)

このイベントはルート変更が発生する前に $rootScope から投稿されます。