AngularJS範囲(スコープ)2024 年の最新の入門チュートリアル。このコースでは スコープを使用する方法,AngularJS例,スコープの概要,AngularJS例,スコープスコープ,AngularJS例,ルートスコープ,AngularJS例, について学習できます。
AngularJS範囲(スコープ)
有効範囲(スコープ)の間のリンクHTML(表示)やJavaScript(コントローラ)で使用されます。
スコープがオブジェクトであり、メソッドとプロパティが用意されています。
スコープは、ビューおよびコントローラで使用することができます。
スコープを使用する方法
あなたは、コントローラAngularJSを作成するときは、引数としてスコープオブジェクトを$することができます。
AngularJS例
コントローラは、上の表示属性に対応する属性:
<DIV ngのアプリ= "て、myApp " NG-コントローラ= "myCtrl">
<H1> {{carname}} </ H1>
</ DIV>
<スクリプト>
VARアプリ= angular.module( 'て、myApp' 、[]);
app.controller( 'myCtrl'、関数( $スコープ){
$の scope.carname = "ボルボ";
});
</スクリプト>
»をお試しください コントローラで$スコープのオブジェクトを追加する場合、ビュー(HTML)は、これらのプロパティを取得することができます。
ビュー、あなたはあなただけのような 、属性名を追加する必要があり、$スコープ接頭辞を追加する必要はありません:{{carname}}。
スコープの概要
AngularJSアプリケーションの構成は次のとおりです。
- ビュー(ビュー)、それはHTMLです。
- モデル(モデル)、利用可能なデータの現在のビュー。
- コントローラ(コントローラ)、JavaScript関数は、プロパティを追加または変更することができます。
スコープモデル。
スコープは、これらの属性とメソッドを持つJavaScriptオブジェクトのプロパティとメソッドは、ビューとコントローラで使用することができることです。
AngularJS例
ビューを変更する場合は、モデルとコントローラが更新されます。
<DIV ngのアプリ= "て、myApp " NG-コントローラ= "myCtrl">
<入力ngのモデル= "名前 ">
<H1>私の名前は{{名前}} </ H1 >
</ DIV>
<スクリプト>
VARアプリ= angular.module( 'て、myApp' 、[]);
app.controller( 'myCtrl'、関数( $スコープ){
$ scope.name = "ジョン・ダウ」。
});
</スクリプト>
»をお試しください
スコープスコープ
あなたが現在使用している範囲を理解することは非常に重要です。
両方の場合において、唯一のスコープスコープがありますので、このプロセスは比較的簡単ですが、大規模なプロジェクトで、HTML DOMが複数のスコープを持っている、あなたは、対応するスコープの範囲を知る必要があり、あなたが使用するものですA。
AngularJS例
我々はNG・リピートコマンドを使用すると、現在の重複オブジェクトの各重複を訪問しました。
<DIV ngのアプリ= "て、myApp " NG-コントローラ= "myCtrl">
<UL>
<李NG・リピート= "X名に"> {{X}} </ LI>
</ UL>
</ DIV>
<スクリプト>
VARアプリ= angular.module( 'て、myApp' 、[]);
app.controller( 'myCtrl'、関数( $スコープ){
$ scope.names = [ "エミール"、 "トビアス」、「ライナス」];
});
</スクリプト>
»をお試しください それぞれの<LI>要素は、現在の重複したオブジェクトにアクセスすることができ、ここで、対応する文字列で、変数xを示します。
ルートスコープ
すべてのアプリケーションは$ rootScopeを持って、それがNGアプリのディレクティブが含まれているすべてのHTML要素に適用されます。
$ rootScopeは、アプリケーション全体に作用することができます。各コントローラは、ブリッジの範囲にあります。 各コントローラに定義された値とRootscopeのに使用することができます。
AngularJS例
あなたは$ rootScopeにコントローラを作成すると、パラメータをアプリケーションで使用することができるように渡されました。
<DIV ngのアプリ= "て、myApp " NG-コントローラ= "myCtrl">
<H1> {{姓}} 家族:</ H1>
<UL>
<李NG・リピート= "X名に"> {{X}} {{姓}} </ LI>
</ UL>
</ DIV>
<スクリプト>
VARアプリ= angular.module( 'て、myApp' 、[]);
app.controller( 'myCtrl'、関数( $スコープ、$ rootScope){
$ scope.names = [ "エミール"、 "トビアス」、「ライナス」];
$ rootScope.lastname = "Refsnes";
});
</スクリプト>
»をお試しください