ディレクティブを作ろう (7/7)

<ok>タグのように、タグそのものをまるごとディレクティブとして作成する他に、「属性」としてディレクティブを用意することもできます。属性として用意するディレクティブは、さまざまなHTMLタグに追記して使うことができる、という利点があります。

これは、基本的な書き方は、最初に説明した「オブジェクトをreturnする」やり方と同じです。ただ、用意する値が少し違うだけです。整理すると、こうなります。

モジュール.directive( 名前 , 
    function(){
        return {
        restrict: 'A',
        template: 出力内容
        };
    });

directiveでreturnする関数オブジェクトでは、templateの他に「restrict」という値を用意してやります。これは、そのディレクティブがどこで利用できるかを示すもので、以下のような値が使えます。

'E'――エレメントとして使える。<ok>というような具合。
'A'――属性として使える。<p ok>といった具合。
'AE'――上記の両方で使える。

restrict:'A'を指定すれば、属性として使えるディレクティブが作れる、というわけです。

では、簡単なサンプルとして、下のリスト欄にスクリプトを挙げておきます。これは、ok属性に３つの値を用意してあります。例えば、こんな感じで利用します。

<div ok="large">This is Large sample!</div>
<div ok="midium">This is Midium sample!</div>
<div ok="small">This is Small sample!</div>

ここでは、template属性の値に関数を用意してあります。複雑な処理を行う場合は、そのほうが便利ですからね。ただし、関数を用意する場合、引数に注意しましょう。

template:function(scope, element){……});

このように、scopeとelementの２つが渡されます。属性の値は、elementから直接取り出せます。ここでは、element['ok']で、ok属性の値を取り出しています。

また、このok属性があるタグの内に書かれている値は、scope[0].textContentとして取り出しています。elementではなく、scopeから取り出しているので間違えないようにしましょう。

属性ディレクティブは、あくまで主となるタグの中に追加するものですので、そのタグ自体をドラスティックに変えてしまうようなものではなく、そこに何かを追加する程度のものとして設計するのが良いでしょう。まるごと変えてしまうようなものは、エレメントとして作成すると良いでしょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

myapp.directive('ok', function(){
    return {
        restrict: 'A',
        template:function(scope, element){
            var size = 24;
            switch(element['ok']){
            case 'large':
                size = 48; break;
            case 'midium':
                size = 36; break;
            case 'small':
                size = 24; break;
            }
            var obj = scope[0];
            var tag ='<span style="font-size:' + size
                + 'pt">' + scope[0].textContent
                + '</span>';
            return tag;
        }
    };
});