HTML に詳しい友人は、HTML には多くの属性があることを知っています。たとえば、 タグの href 属性はリンクの URL アドレスを指定するために使用でき、 タグの type 属性は入力の種類を指定するために使用できます。 AngularJS ディレクティブは、HTML 属性を拡張することにより、AngularJS アプリケーションに機能を追加します。
AngularJS ディレクティブは HTML を拡張するために使用されます。これらは、ng- 接頭辞で始まる特別なプロパティです。次のディレクティブについて説明します:
一般的な AngularJS コマンド
ng-app ディレクティブは、AngularJS アプリケーションを初期化します。
ng-init ディレクティブはアプリケーション データを初期化します。
ng-model ディレクティブは、要素の値 (入力フィールドの値など) をアプリケーションにバインドします。
ng-app ディレクティブ
ng-app ディレクティブは、AngularJS アプリケーションを開始します。ルート要素を定義します。 AngularJS アプリケーションを含む Web ページを読み込むアプリケーションを自動的に初期化または起動します。また、さまざまな AngularJS モジュールを AngularJS アプリケーションにロードするためにも使用されます。以下の例では、div 要素の ng-app 属性を使用してデフォルトの AngularJS アプリケーションを定義します。
<div ng-app=""> ... </div>
ng-init コマンド
ng-init ディレクティブは、AngularJS アプリケーションのデータを初期化します。アプリケーションで使用する変数に値を入れるために使用されます。次の例では、countries 配列を初期化します。 JSON 構文を使用して国の配列を定義します。
<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]"> ... </div>
ng-model ディレクティブ
ng-model ディレクティブは、AngularJS アプリケーションで使用されるモデル/変数を定義します。以下の例では、「name」という名前のモデルを定義します。
<div ng-app=""> ... <p>Enter your Name: <input type="text" ng-model="name"></p> </div>
ng-repeat ディレクティブ
ng-repeat ディレクティブは、HTML 要素のコレクション内の各項目を繰り返します。以下の例では、配列の国を反復処理しています。
<div ng-app=""> ... <p>List of Countries with locale:</p> <ol> <li ng-repeat="country in countries"> {{ 'Country: ' + country.name + ', Locale: ' + country.locale }} </li> </ol> </div>
AngularJS ディレクティブの例
<div ng-app="" ng-init="firstName='John'"> <p>在输入框中尝试输入:</p> <p>姓名:<input type="text" ng-model="firstName"></p> <p>你输入的为: {{ firstName }}</p> </div>
ng-app ディレクティブは、現在の
注意
Web ページには、さまざまな要素で実行される複数の AngularJS アプリケーションを含めることができます。
ng-init を使用してデータを初期化することはあまり一般的ではありません。データを初期化するより良い方法については、後続の章で学習します。
ng-repeat ディレクティブ
ng-repeat ディレクティブは HTML 要素を繰り返します。これは JavaScript の each ループに相当します
<div ng-app="" ng-init="names=['Jani','Hege','Kai']"> <p>使用 ng-repeat 来循环数组</p> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul> </div>
上記の例は次の HTML に解析されます
<ul> <li>Jani</li> <li>Hege</li> <li>Kai</li> </ul>
ng-repeat はオブジェクト配列で動作します:
<div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"> <p>循环对象:</p> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul> </div>
は次の HTML に解析されます:
<ul> <li>Jani, Norway</li> <li>Hege, Sweden</li> <li>Kai, Denmark</li> </ul>
カスタム手順
AngularJS の組み込みディレクティブに加えて、カスタム ディレクティブも作成できます。 .directive 関数を使用してカスタム ディレクティブを追加できます。 カスタム ディレクティブを呼び出すには、カスタム ディレクティブ名を HTMl 要素に追加する必要があります。 キャメルケースを使用してディレクティブに名前を付けます askh5Directive ですが、使用する場合は - で区切る必要があります: askh5-directive
<body ng-app="myApp"> <askh5-directive></askh5-directive> <script> var app = angular.module("myApp", []); app.directive("askh5Directive", function() { return { template : "<h1>自定义指令!</h1>" }; }); </script> </body>
上記の例は次のように解析されます。
命令は次の方法で呼び出すことができます:
要素名:
属性:
クラス名:
コメント:
使用を制限する
制限値は次のとおりです:
E は要素名でのみ使用できます
A は属性にのみ使用できます
C はクラス名でのみ使用できます
M はコメント専用です
restrict のデフォルト値は EA です。つまり、命令は要素名と属性名を通じて呼び出すことができます。
var app = angular.module("myApp", []); app.directive("askh5Directive", function() { return { restrict : "A", template : "<h1>自定义指令!</h1>" }; });
上記の AngularJS ではプロパティ呼び出しのみが許可されます。
関連記事:
AngularJS 入門チュートリアル - AngularJS 式
上記の内容は、編集者が紹介するAngularJS入門チュートリアルのAngularJS手順です。皆様のお役に立てれば幸いです。