AngularJSでは、 ディレクティブと呼ばれる新しい属性を持つHTMLを拡張できます。
AngularJSは、アプリケーションに機能を提供しています内蔵のディレクティブのセットを持っています。
AngularJSはまた、あなたがあなた自身のディレクティブを定義することができます。
AngularJSディレクティブ
AngularJSディレクティブは、HTMLプレフィックスを持つ属性拡張されng- 。
ng-appディレクティブは、AngularJSアプリケーションを初期化します。
ng-initディレクティブは、アプリケーションデータを初期化します。
ng-modelディレクティブは、アプリケーションデータへのHTMLコントロール（入力、選択、テキストエリア）の値をバインドします。
私たちの中のすべてのAngularJSディレクティブについて読むAngularJSディレクティブの参照を 。
例
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
»それを自分で試してみてください ng-appディレクティブはまた、<div>要素はAngularJSアプリケーションの「所有者」であるAngularJSを伝えます。
データバインディング
{{ firstName }}発現は、上記の例では、バインディング式AngularJSデータです。
AngularJSでデータバインディングはAngularJSデータとAngularJS式をバインドします。
{{ firstName }}にバインドされているng-model="firstName" 。
次の例では2つのテキストフィールドには、2 ngのモデルのディレクティブと一緒にバインドされています。
例
<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div> »それを自分で試してみてください  | 使用ng-init非常に一般的ではありません。 あなたは、コントローラに関する章のデータを初期化する方法を学習します。 |
|---|
HTML要素を繰り返します
ng-repeatディレクティブは、HTML要素が繰り返されます。
例
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
»それを自分で試してみてください ng-repeatディレクティブは、実際には、コレクション内の項目ごとに一度HTML要素のクローン 。
ng-repeatオブジェクトの配列で使用されるディレクティブ：
例
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
»それを自分で試してみてください | AngularJSは、データベースのCRUD（読むアップデートが作成削除）アプリケーションに最適です。 これらのオブジェクトは、データベースからレコードだったら想像。 |
|---|
NG-アプリ指令
ng-appディレクティブは、AngularJSアプリケーションのルート要素を定義します。
ng-app Webページがロードされるときにディレクティブは、自動ブートストラップアプリケーションを（自動的に初期化）します。
NG-Init指令
ng-initディレクティブはAngularJSアプリケーションの初期値を定義します。
通常は、NG-のinitを使用しません。 代わりに、コントローラまたはモジュールを使用します。
後でコントローラとモジュールの詳細を学びます。
NG-モデル指令
ng-modelディレクティブは、アプリケーションデータへのHTMLコントロール（入力、選択、テキストエリア）の値をバインドします。
ng-modelディレクティブもできます：
- アプリケーションデータ（番号、電子メール、必須）用の型の検証を提供します。
- アプリケーションデータ（無効、汚い、触れて、エラー）のステータスを提供します。
- HTML要素のCSSクラスを提供します。
- HTMLフォームにHTML要素をバインドします。
もっと読むng-model次の章でディレクティブを。
新しいディレクティブを作成します。
すべてのビルトインAngularJSディレクティブに加えて、独自のディレクティブを作成することができます。
新しいディレクティブを使用して作成され.directive機能を。
新しいディレクティブを呼び出すには、新しいディレクティブと同じタグ名を持つHTML要素を作ります。
ディレクティブに名前を付ける場合、あなたはキャメルケース名を使用する必要があり、 w3TestDirectiveそれを呼び出すときに、しかし、あなたが使用する必要があります-区切られた名前、 w3-test-directive ：
例
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
»それを自分で試してみてください あなたが使用してディレクティブを呼び出すことができます。
- 要素名
- 属性
- クラス
- コメント
以下の例は、すべて同じ結果が生成されます。
制限事項
あなただけの方法のいくつかによって呼び出されるためにあなたのディレクティブを制限することができます。
例
追加することにより、 restrict値とプロパティを"A" 、ディレクティブは属性のみによって呼び出すことができます。
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
»それを自分で試してみてください 法的制限値は、次のとおりです。
-
E要素名用 -
A属性の -
Cクラスのために -
Mコメント用
デフォルトでは値があるEAの両方の要素名や属性名は、ディレクティブを呼び出すことができることを意味し、。