AngularJSでは、HTMLのタグに独自の属性を追加したらい、あるいはオリジナルのタグを記述することでHTML内に特殊な機能を割り当てていました。こうした機能は「ディレクティブ」と呼ばれます。

このディレクティブは、AngularJSに用意されているだけではなく、自分で作ることもできます。自分でオリジナルのディレクティブを作成することで、独自のタグなどを追加していくことができるのです。

ディレクティブは、モジュールに作成します。モジュールのオブジェクトに用意されている「directive」というメソッドを利用して作成します。これは、以下のような形で記述します。

モジュール.directive( 名前, 関数 );

第1引数には、ディレクティブの名前を指定します。この名前が、そのままタグ名や属性名として使えるようになります。第2引数に、ディレクティブの具体的な処理を行う関数オブジェクトが用意されます。

directiveメソッドそのものの使い方は簡単です。問題は、引数に用意する関数をどのように作ればよいか？でしょう。これは、「ディレクティブで必要な値を持つオブジェクトを返す」処理を考えるのです。

まずは、もっともシンプルな形として、「template」という値を持つオブジェクトを返すディレクティブ関数を考えてみましょう。これは、以下のようになるでしょう。

function(){
    return { template: ……出力内容…… };
}

「template」は、出力するタグのテンプレートです。要するに、ここに用意した内容がそのままWebページに表示される、と考えればいいでしょう。