AngularJSの範囲には、非常に階層的で適切な構造があります。それらはすべて、メインの$ルーツスコープ(つまり、対応する角度アプリケーションまたはNG-APP)を持っています。その後、他のすべてのスコープパーツはこの$ Rootscopeから継承されます。多くの場合、これらのスコープは変数を共有したり、別のプロトタイプから何も継承したりしないことがわかります。
この場合、スコープ間でどのように通信しますか? 1つのオプションは、アプリケーション範囲でSingletonサービスを作成し、このサービスを通じてすべてのサブスコープの通信を処理することです。
Angularjsには別のオプションがあります。範囲内のイベントを通じて通信を処理します。しかし、このアプローチにはいくつかの制限があります。たとえば、すべての監視の範囲にイベントを広く広めることはできません。親の範囲と子供の範囲と通信するかどうかを選択する必要があります。
$ on、$ emit、$ broadcastは、コントローラー間のイベントとデータの転送を簡単にします。
例は次のとおりです
HTMLコード
<div ng-controller = "parentctrl"> <! - parent-> <div ng-controller = "selfctrl"> <! - self-> <a ng-click = "click()"> click me </a> <div ng-controller = "育児"> </div> <! <! - 親 - > </div>
JSコード
app.Controller( 'selfctrl'、function($ scope){$ scope.click = function(){$ scope。$ broadcast( 'to-child'、 'child'); $ scope。$ emit( 'to-parent'、 'parent');}}); app.controller( 'parentctrl'、$ scope($ scope)関数(event、data){console.log( 'parentctrl'、data); $ scope。$ on( 'to-child'、function(event、data){console.log( 'childctrl'、data);関数($ scope){$ scope。$ on( 'to-parent'、console.log( 'broctrl'、data);最終結果
ParentCtrl親
育児の子供
$ emitおよび$ broadcastは複数のパラメーターを渡すことができ、$ onは複数のパラメーターを受信できます。
メソッドの$のイベントパラメーター、そのオブジェクトのプロパティとメソッドは次のとおりです
| イベントプロパティ | 目的 |
|---|---|
| event.targetScope | 元のイベントを放出または伝播する範囲 |
| event.currentscope | 現在処理されているイベントの範囲 |
| event.name | イベント名 |
| event.stoppropagation() | イベントがさらに伝播するのを防ぐ機能(バブリング/キャプチャ)(これは「$ emit」で放出されたイベントでのみ機能します) |
| event.preventdefault() | この方法では実際には何もしませんが、「DefaultPrevented」をTRUEに設定します。イベントリスナーの実装者がアクションを実行するまで、「DefaultPrevented」の値を確認しません。 |
| event.defaultPrevented | `preventDefault」が呼び出された場合はtrue |
さまざまなコントローラーのサービス通信よりもはるかに便利だと感じています~~
上記は、Angularjs $ on、$ emit、$ broadcastに関する情報の編集です。今後も関連情報を追加し続けます。このサイトへのご支援ありがとうございます!