AngularJS 入門チュートリアル AngularJS 説明書_AngularJS

HTML に詳しい友人は、HTML には多くの属性があることを知っています。たとえば、3499910bf9dac5ae3c52d5ede7383485 タグの href 属性はリンクの URL アドレスを指定するために使用でき、d5fd7aea971a85678ba271703566ebfd タグの 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 ディレクティブは、現在の c59ab3f379aefc8f322db731743f1facカスタム手順!473f0a7621bec819994bb5020d29372a

命令は次の方法で呼び出すことができます:

要素名: 6864244c5133c8be482ad78135864b813c099c703ad56dc8c4d20f130b6633bb

属性:215a28f1b197530e83ae97e8b7faab7416b28748ea4df4d9c2150843fecfba68

クラス名:246c50ea82720d6a9056246ce10521a416b28748ea4df4d9c2150843fecfba68

コメント: b7545ba00633a16187518dc9415e7590

使用を制限する

制限値は次のとおりです:

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手順です。皆様のお役に立てれば幸いです。