AngularJSディレクティブ
AngularJSを使用すると、 ディレクティブと呼ばれる新しい属性を使用してHTMLを拡張できます。
AngularJSには、アプリケーションに機能を提供する一連の組み込みディレクティブがあります。
AngularJSでは、独自のディレクティブを定義することもできます。
AngularJSディレクティブ
AngularJSディレクティブは、プレフィックスが。の拡張HTML属性ですng-。
ディレクティブはng-appAngularJSアプリケーションを初期化します。
ng-initディレクティブはアプリケーションデータを初期化します。
ng-modelディレクティブは、HTMLコントロール（input、select、textarea）の値をアプリケーションデータにバインドします。
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-modelディレクティブでバインドされています。
例
<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要素を1回複製します。
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（Create Read Update Delete）アプリケーションに最適です。
これらのオブジェクトがデータベースからのレコードであるかどうかを想像してみてください。
アプリ内ディレクティブ
ng-appディレクティブは、AngularJSアプリケーションのルート要素を定義します。
ng-appディレクティブは、Webページがロードされると、アプリケーションを自動ブートストラップ（自動的に初期化）します。
熱指令
ng-initディレクティブは、AngularJSアプリケーションの初期値を定義します。
通常、ng-initは使用しません。代わりに、コントローラーまたはモジュールを使用します。
コントローラとモジュールについては、後で詳しく説明します。
モデリング指令
ng-modelディレクティブは、HTMLコントロール（input、select、textarea）の値をアプリケーションデータにバインドします。
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>
次を使用してディレクティブを呼び出すことができます。
- 要素名
- 属性
- クラス
- コメント
以下の例はすべて同じ結果を生成します。
要素名
<w3-test-directive></w3-test-directive>
属性
<div w3-test-directive></div>
クラス
<div class="w3-test-directive"></div>
コメント
<!-- directive: w3-test-directive -->
制限
一部のメソッドによってのみ呼び出されるようにディレクティブを制限できます。
例
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、要素名と属性名の両方がディレクティブを呼び出すことができることを意味します。