AngularJSスコープ(スコープ)
スコープは、HTML(ビュー)とJavaScript(コントローラー)の間のリンクです。
スコープは、利用可能な方法とプロパティを備えたオブジェクトです。
スコープは、ビューとコントローラーに適用できます。
スコープの使用方法
AngularJSでコントローラーを作成すると、$ Scopeオブジェクトをパラメーターとして渡すことができます。
AngularJSインスタンス
コントローラー内のプロパティは、ビューのプロパティに対応しています。
<!doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> </head> ng-controller = "myctrl"> {{carname}} </div> <script> var app = angular.module( 'myapp'、[]); app.controller( 'myctrl'、function($ scope){$ scope.carname = "volvo";} {{}}のビューで使用されている名前。 </p> </body> </html実行結果:
ボルボ
{{}}のビューで使用されている名前に対応するコントローラーに属性名「carname」を作成します。
コントローラーに$スコープオブジェクトを追加すると、ビュー(HTML)がこれらのプロパティを取得できます。
ビューでは、$スコーププレフィックスを追加する必要はありません。{{carname}}などの属性名を追加するだけです。
スコープの概要
AngularJSアプリケーションの構成は次のとおりです。
ビュー(ビュー)、つまり、html。
モデル、現在のビューで利用可能なデータ。
コントローラー、つまりJavaScript関数は、プロパティを追加または変更できます。
スコープはモデルです。
Scopeは、ビューやコントローラーで使用できるプロパティとメソッドを備えたJavaScriptオブジェクトです。
AngularJSインスタンス
ビューを変更すると、モデルとコントローラーもそれに応じて更新されます。
<!doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> ng-model = "name">私の名前は{{name}} </div> <script> var app = angular.module( 'myapp'、[]); app.controller( 'myctrl'、function($ scope){$ scope.name = "john doe";});コントローラーの対応する属性値。 </p> </body> </html>実行結果:
私の名前はジョン・ドーです
入力ボックスの値を変更すると、モデルに影響し、もちろんコントローラーの対応する属性値にも影響します。
スコープスコープ
現在使用している範囲を知ることは非常に重要です。
上記の2つのインスタンスでは、スコープスコープは1つしかないため、処理するのは比較的簡単です。ただし、大規模なプロジェクトでは、HTML Domに複数のスコープがあります。この時点で、使用しているスコープに対応するスコープを知る必要があります。
AngularJSインスタンス
NG-Reepeatディレクティブを使用すると、各重複オブジェクトにアクセスします。
<!doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> </head> ng-controller = "myctrl"> <ul> <li ng-repeat = "x in names"> {{x}} </li> </ul> </div> <script> var app = angular.module( 'myApp'、[]); app.controller( 'myctrl'、cope($ scope){$ scope. "" "" "" "" emil " "linus"];}); </script> </body> </html>実行結果:
各<li>要素は、文字列に対応する現在の重複オブジェクトにアクセスでき、変数xで表されます。
ルートスコープ
すべてのアプリケーションには、NG-APP指令に含まれるすべてのHTML要素で使用できる$ Rootscopeがあります。
$ Rootscopeは、アプリケーション全体で使用できます。各コントローラーの範囲の橋です。 Rootscopeで定義された値は、各コントローラーで使用できます。
AngularJSインスタンス
コントローラーを作成するときは、$ rotscopeをパラメーターとして渡し、アプリケーションで使用できます。
<!Doctype html> <html> <head> <meta charset = "utf-8"> <スクリプトsrc = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head>名前は{{lastName}}家族メンバー:<ul> <li ng-repeat = "in names"> {{x}} {{lastName}}} </li> </ul> </div> <スクリプト> app = angular.module( 'myapp'、]; app.controller($ scope($ scope) $ scope.names = ["emil"、 "tobias"、 "Linus"]; </p> </body> </html>実行結果:
姓はRefsnesファミリーのメンバーです。
$ Rootscopeには、ループオブジェクトの内側と外側の両方でアクセスできることに注意してください。