AngularJSまとめ ~ディレクティブ~

ディレクティブについていまいちわかっていなかったのでまとめました。

ディレクティブとは

AngularJSではビューとしてHTMLをベースとしたテンプレートエンジンを採用しています。
そこでは、標準的なHTML構文だけではなく、AngularJS固有の要素や属性、自分で作成した要素や属性を利用することでHTML構文を拡張できます。
このようなカスタム要素、属性のことをディレクティブ<directive>といいます。

例えば、{{book.title}}といったangular式やng-app、ng-repeatなどはAngularJSにデフォルトで組み込まれたディレクティブです(これらはHTML構文として存在しておらず、HTML構文に対する拡張です)。

sample.js

<input type="text" ng-model="value" />

上記のng-modelはAngularJS標準のディレクティブです。HTML構文として存在しているわけではありません。AngularJSが独自にng-modelを解釈しています。
ng-modelを使用することによって、入力フィールドとモデルを結びつけることができます。

ディレクティブの自作

AngularJSにはたくさんの標準ディレクティブがありますが、開発者も自作することができます。

ディレクティブの種類

ディレクティブにはいくつか種類があります(記述できる場所が複数あります)。
上記で登場したng-modelのような「属性」や、ng-repeatのような「要素」があります。

例:my-directiveディレクティブを自作したとする。

記述できる場所	例
要素	<my-directive></my-directive>
属性	<div my-directive="test"></div>
クラス	<div class="my-directive"></div>
コメント	<!--directive:my-directive-->

ディレクティブの定義

「こんにちは」と表示させるディレクティブを作成します。

sample.js

angular.module('myApp', [])
  .directive('myDirective', function(){
    return {
      restrict: 'E',
      template: '<div>こんにちは</div>'
    }
  });

sample.html

<my-directive></my-directive>

ブラウザ

こんにちは

以下、詳しく説明します。

directiveメソッド

directiveメソッド

directive(name, factory)

name: ディレクティブの名前
factory: ディレクティブ生成のためのファクトリー関数

Moduleオブジェクトのdirectiveメソッドを使用することによってdirectiveを定義することができます。
factoryでは、ディレクティブを定義するオブジェクトを生成し、戻り値として返す必要があります。
ディレクティブを定義するオブジェクトではプロパティを指定できます。
上記のサンプルではrestrictとtemplateが指定されています。

以下、オブジェクトに指定してるプロパティについてです。

restrict
ディレクティブの種類(適用先)を指定します。
今回は「要素」として使用したいため、Eを指定します。
その他の種類の指定する値です。

種類	指定する値
要素	E
属性	A
クラス	C
コメント	M

デフォルトはEA(要素、属性、どちらでも使える)となります。

template
ディレクティブで利用するテンプレートを指定することができます。
templateではテンプレートそのものを文字列として定義することができ、手軽に書くことができます(ハードコーディングということですね)。

templateURL
templateURLというプロパティを使用すると、テンプレートとして使用するファイルを指定することができます。
先ほどのsample.jsの<div>こんにちは</div>をhello.htmlに書き、templateURL：hello.htmlという指定を行うことが可能です。

他にもたくさんのプロパティが準備されています。