AngularJSディレクティブ

前：AngularJS式

次へ：AngularJSコントローラ

新しいプロパティは、HTMLを拡張するためにAngularJS ディレクティブによって呼び出されます。

AngularJSは、組み込みの機能を追加するためのアプリケーションのための指示。

AngularJSは、あなたが命令をカスタマイズすることができます。

AngularJSディレクティブ

AngularJS命令は、HTMLの拡張が接頭辞ng-を持つ属性です。

NG-アプリ命令はAngularJSアプリケーションを初期化します。

NG-initコマンドは、アプリケーション・データを初期化します。

NGモデルは、（例えば、入力フィールドの値として）要素値は、アプリケーションにバインドコマンド。

詳細な手順は、の内容で見つけることができAngularJSリファレンスマニュアル。

AngularJS例

<div ng-app="" ng-init="firstName='John'">

<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你输入的为： {{ firstName }}</p>

</div>

»をお試しください

NG-アプリディレクティブは、<div>要素はのAngularJS アプリケーションであるAngularJSを伝える「所有者」。

	Webページは、さまざまな要素で複数の実行AngularJSのアプリケーションを含めることができます。

データバインディング

上記の例では{{firstNameのは}} AngularJS式は、データバインディング式です。

AngularJS AngularJS発現データと同期AngularJSデータバインディング、。

{{姓}} NG-モデル= "firstNameの"同期によります。

次の例では、2つのテキストフィールドは、2つの同期命令NGモデルを介して計算されます。

AngularJS例

<div ng-app="" ng-init="quantity=1;price=5">

<h2>价格计算器</h2>

数量： <input type="number" ng-model="quantity">
价格： <input type="number" ng-model="price">

<p><b>总价：</b> {{ quantity * price }}</p>

</div>

»をお試しください

	使用NG-initは非常に一般的ではありません。あなたは、コントローラの章でデータを初期化するためのより良い方法であることを学びます。

繰り返しHTML要素

NG-リピート命令は、HTML要素が繰り返されます。

AngularJS例

<DIV ngのアプリ= "" NG-INIT = "名= [ 'ヤニ'、 'HEGE'、 'カイ']">
<P>配列をループする使用ngのリピートます。</ p>
<UL>
<李NG・リピート= "名前にX">
{{X}}
</李>
</ UL>
</ DIV>

»をお試しください

ngのリピート命令はオブジェクトの配列で使用されます。

AngularJS例

<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>

»をお試しください

	CRUDのAngularJS完璧なサポートデータベースアプリケーション（削除、読み取り、更新の更新を読んで、作成、削除を増やします）。データベースのレコードにオブジェクトの例を考えます。

NG-アプリディレクティブ

NG-アプリディレクティブは、 ルート要素 AngularJSアプリケーションを定義します。

ページは自動的に （自動初期化）アプリケーションブートロードされるngのアプリ命令 。

後で、コードモジュールに接続された値（例えば、NG-アプリは= "のmymodule"）によってアプリをngの方法を学習します。

NG-initコマンド

NG-のinit命令AngularJSアプリケーションは、 初期値を定義します。

通常の状況下では、NG-のinitを使用しないでください。あなたはそれを交換するコントローラまたはモジュールを使用します。

後で、コントローラおよびモジュールの詳細を学びます。

NG-モデルディレクティブ

NG-モデルアプリケーションデータへの指示バインドHTML要素 。

NG-モデルディレクティブもできます：

アプリケーション・データ・タイプ（番号、電子メール、必須）の検証を提供します。
アプリケーションデータ（無効、汚い、触れて、エラー）のステータスを提供します。
HTML要素のCSSクラスを提供します。
HTMLフォームにHTML要素をバインドします。

ngのリピート命令

各項目のコレクション（配列）のためのNG-リピート命令は、HTML要素のクローンを作成します。

カスタムコマンドを作成します。

内蔵の命令にAngularJS加えて、我々はまた、カスタムコマンドを作成することができます。

.directive機能カスタムコマンドを追加するために使用することができます。

カスタムコマンドを呼び出すには、HTML要素のカスタムコマンド名を追加する必要があります。

ディレクティブ、w3bigDirectiveに名前を付けるためにこぶメソッドを使用しますが、あなたはそれを使用する必要がある場合-セグメンテーション、w3big-ディレクティブ：

AngularJS例

<ボディNG-アプリ= "て、myApp ">

<W3big-ディレクティブ> </ w3big -directive>

<スクリプト>
VARアプリ= angular.module（ "て、myApp」、[]）;
app.directive（「w3bigDirective」、関数（）{
リターン{
テンプレート： "<H1>命令</ H1>！"
};
}）;
</スクリプト>

</ BODY>

»をお試しください

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