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

では、先ほどのscript.jsに記述したOKディレクティブを修正し、属性と、タグ内に用意したテキストを利用するように改良してみましょう。

下にそのサンプルを挙げておきます。ここでは、「size」「color」という２つの属性と、タグ内に書かれているテキストに対応する処理を用意してあります。ざっと整理しておきましょう。

・sizeとcolor属性について
属性は、attrs引数にまとめられています。ここでは、このattrsから、sizeとcolorの属性をそれぞれ変数に取り出しています。

var size = attrs['size'];
size = size == null ? '24pt' : size;
var color = attrs['color'];
color = color == null ? 'red' : color;

このように、 attrs[名前] という形で、指定した名前の属性の値を取り出すことができます。ただし、ここで注意したいのは、「属性がタグに用意されてない場合もある」ということでしょう。その場合、取り出した値はundefinedになりますから、取り出した変数に改めて値を代入するなりして対処しておくと良いでしょう。

・タグ内の値について
例えば、<ok>Hello</ok>というように、タグ内に値（ここではHello）を記述したとき、この値を取り出して利用することができます。値は、以下のようにして取り出しています。

var txt = element[0].textContent;

引数で渡されるelementが、ディレクティブのDOMエレメントです。ただし、これは配列になっており、インデックス番号ゼロの値が、最初のディレクティブのDOMエレメントになります（普通は、ゼロ番の値１つだけしかないでしょう）。

element[0]から、内部にある値を取り出すにはいろいろやり方があるでしょう。ここではtextContentとして取り出してあります。ディレクティブのタグの更に内部に別のタグが組み込まれていたりするとこれでは処理できないでしょうが、単に「内側にテキストが書いてあるだけ」というならこれで十分ですね。

element[0].innerHTML = tag;

そして、出力するタグをテキストとして作成し、element[0]のinnerHTMLでそれを組み込みます。これで、<ok>タグの内部が書き換わります。

(by. SYODA-Tuyano.)

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

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

var myapp = angular.module('myapp',[]);

myapp.directive('ok', function(){
    return function(scope,element,attrs){
        var size = attrs['size'];
        size = size == null ? '24pt' : size;
        var color = attrs['color'];
        color = color == null ? 'red' : color;
        var txt = element[0].textContent;
        var tag = '<span style="font-size:' + size
            + ';color:' + color + ';">' + txt + '</span>';
        element[0].innerHTML = tag;
    };
});