AngularJS ディレクティブ

« 前章へ

次章へ »

AngularJS は、ディレクティブと言う新しい属性で HTML を拡張します。

AngularJS は、アプリケーションに機能を提供する、一連の組込みディレクティブを持っています。

AngularJS では、独自のディレクティブを定義することもできます。

AngularJS ディレクティブ

AngularJS ディレクティブは、接頭辞 ng- によって拡張された HTML 属性です。

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

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>

Try it Yourself »

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>

Try it Yourself »

	`ng-init` を使用するのは、あまり一般的ではありません。データの初期化方法は、コントローラに関する章の中で学習します。

HTML 要素の繰返し

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

例

Try it Yourself »

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>

Try it Yourself »

	AngularJS は、データベースの CRUD (Create Read Update Delete) アプリケーションに最適です。これらのオブジェクトが、データベースからのレコードだった場合を想像してみてください。

ng-app ディレクティブ

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

ng-app ディレクティブは、Web ページがロードされたときに、 auto-bootstrap（自動初期化）を行います。

ng-initディレクティブ

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

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

後段で、コントローラとモジュールに関する詳細を学習します。

ng-model ディレクティブ

ng-model ディレクティブは、HTML コントローラ（input、select、textarea）の値をアプリケーション・データにバインドします。

ng-model ディレクティブは、以下のことも可能です：

アプリケーション・データの型に対する検証の提供（数値、電子メール、必須）。
アプリケーション・データ状態の提供（invalid、dirty、touched、error）。
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>

Try it Yourself »

次を使用することで、ディレクティブを呼び出すことができます：

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

下の例は、すべて同じ結果になります：

Element name

<w3-test-directive></w3-test-directive>

Try it Yourself »

Attribute

Try it Yourself »

Class

Try it Yourself »

Comment

Try it Yourself »

制限事項

メソッドを呼び出すためのディレクティブを制限することができます。

例

値 "A" を持った restrict プロパティを追加することにより、ディレクティブは属性によってのみ呼び出すことができます：

var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
    return {
        restrict : "A",
        template : "<h1>Made by a directive!</h1>"
    };
});

Try it Yourself »

正当な restrict の値は、以下の通りです：

E 要素名用
A 属性用
C クラス用
M コメント用

デフォルト値は EA で、要素名と属性名の両方によってディレクティブを呼び出すことができることを意味します。

« 前章へ

次章へ »