AngularJS ディレクティブ

AngularJS は、ディレクティブと呼ばれる新しい属性によって HTML を拡張します。

AngularJS は組み込みのディレクティブを使用してアプリケーションに機能を追加します。

AngularJS ではカスタムディレクティブを定義できます。

AngularJS ディレクティブ

AngularJS ディレクティブは、接頭辞（プレフィックス）を持つ拡張 HTML 属性です。ng-。

ng-appディレクティブは AngularJS アプリケーションを初期化します。

ng-initディレクティブはアプリケーションデータを初期化します。

ng-modelディレクティブは要素の値（入力フィールドの値など）をアプリケーションにバインドします。

完全なディレクティブの内容は、AngularJS リファレンスマニュアル。

AngularJS サンプル

<div ng-app="" ng-init="firstName='John'"> <p>入力ボックスに入力してみてください：</p> <p>名前：<input type="text" ng-model="firstName"></p> <p>あなたが入力したのは： {{ firstName }}</p> </div>

試してみる »

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

データバインディング

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

AngularJS のデータバインディングは、AngularJS 式と AngularJS データを同期します。

{{ firstName }}によってng-model="firstName"同期されます。

次のサンプルでは、2 つのテキストフィールドが 2 つの ng-model ディレクティブによって同期されます：

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>

試してみる »

Note 使用ng-initはあまり一般的ではありません。コントローラの章で、より良いデータ初期化方法を学びます。

HTML 要素の繰り返し

ng-repeatディレクティブは HTML 要素を繰り返します：

AngularJS サンプル

<div ng-app="" ng-init="names=['Jani','Hege','Kai']"> <p>ng-repeat を使用して配列をループする</p> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul> </div>

試してみる »

ng-repeatディレクティブをオブジェクトの配列に使用する：

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>

試してみる »

Note AngularJS はデータベースの CRUD（Create=作成、Read=読み取り、Update=更新、Delete=削除）アプリケーションを完全にサポートします。
サンプルの中のオブジェクトをデータベースのレコードと考えてください。

ng-app ディレクティブ

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

ng-appディレクティブはウェブページの読み込みが完了すると自動的にブートストラップ（自動初期化）アプリケーションを起動します。

後ほど、ng-app値（例: ng-app="myModule"）をコードモジュールに接続する方法を学びます。

ng-init ディレクティブ

ng-initディレクティブは AngularJS アプリケーションの初期値を定義します。。

通常、ng-init は使用しません。代わりにコントローラまたはモジュールを使用します。

コントローラとモジュールについては後ほど詳しく学びます。

ng-model ディレクティブ

ng-modelディレクティブはHTML 要素をアプリケーションデータにバインドします。

ng-modelディレクティブは次のこともできます：

  • アプリケーションデータに型検証（number、email、required）を提供します。
  • アプリケーションデータに状態（invalid、dirty、touched、error）を提供します。
  • HTML 要素に CSS クラスを提供します。
  • HTML 要素を HTML フォームにバインドします。

ng-repeat ディレクティブ

ng-repeatディレクティブはコレクション（配列）内の各項目に対してHTML 要素を 1 回クローンします。。


カスタムディレクティブの作成

AngularJS の組み込みディレクティブに加えて、カスタムディレクティブを作成することもできます。

あなたは.directive関数を使用してカスタムディレクティブを追加できます。

カスタムディレクティブを呼び出すには、HTML 要素にカスタムディレクティブ名を追加する必要があります。

ディレクティブの命名にはキャメルケースを使用します。 サンプルDirectiveただし、使用するときは-で区切る必要があります。サンプル-directive:

AngularJS サンプル

<body ng-app="myApp">

<サンプル-directive></サンプル-directive>

<script>
var app = angular.module("myApp", []);
app.directive("サンプルDirective", function() {
    return {
template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>

試してみる »

ディレクティブは次の方法で呼び出すことができます：

  • 要素名
  • 属性
  • クラス名
  • コメント

次のサンプルでも同じ結果が出力されます：

要素名

<サンプル-directive></サンプル-directive>

試してみる »

属性

<div サンプル-directive></div>

試してみる »

クラス名

<div class="サンプル-directive"></div>

試してみる »

コメント

<!-- directive: サンプル-directive -->

試してみる »

使用の制限

ディレクティブを特定の方法でのみ呼び出せるように制限できます。

サンプル

を追加し、restrict属性を設定し、値を"A"に設定することで、ディレクティブを属性の方法でのみ呼び出せるようにします:

var app = angular.module("myApp", []);
app.directive("サンプルDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});

試してみる »

restrict値は次のいずれかになります：

  • E要素名として使用
  • A属性として使用
  • Cクラス名として使用
  • Mコメントとして使用

restrictデフォルト値はEAで、要素名と属性名の両方でディレクティブを呼び出せます。

その他の拡張