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

ディレクティブは、表示をカスタマイズするだけしかできないわけではありません。タグにイベントを組み込み、「動くディレクティブ」を作ることもできます。

これは、別に特別なテクニックが必要なわけではありません。directiveで渡されるelement引数は、DOMエレメントですから、そのままイベントの設定が行えます。onclick属性などに関数を代入したり、あるいはaddEventListenerメソッドを呼び出して設定すればいいのです。

簡単なサンプルを下にあげておきましょう。これは、クリックするとアラートを表示する<click>タグのディレクティブです。例えば、

<click>This is click sample!</click>

こんな感じでタグを用意してみましょう。このテキスト部分をクリックすると、画面にアラートウインドウが現れ、「you click "This is click Sample!"!」とメッセージが表示されます。

ここでは、returnする関数オブジェクト内で、以下のようにしてイベントを組み込んでいます。

element[0].addEventListener("click", function(){
    ……クリック処理……
}, false);

普通のイベント組み込みと同じですね。これで、ディレクティブのDOMエレメントにも普通にイベントを追加することができます。

(by. SYODA-Tuyano.)

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

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

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

myapp.directive('click', function(){
    return function(scope, element, attrs){
        element[0].addEventListener("click", function(){
            var txt = this.textContent;
            alert('you click "' + txt + '"!');
        }, false);
    };
});