ディレクティブを作ろう (3/7)
作成:2016-01-09 08:53
更新:2016-01-09 08:53
更新:2016-01-09 08:53
■関数を使ってエレメントを操作する
ごく単純な、タグを書くだけのようなディレクティブであれば、これで十分使えます。が、普通のHTMLのタグというのは、そんなシンプルな使い方をするのは<br>ぐらいでしょう。普通は、開始タグと終了タグの間に値を書いたり、タグに属性を用意したりしてより表現力を持たせています。
ディレクティブでも、こうしたことは可能です。これには、directiveメソッドの引数として用意する関数を少し書き換える必要があります。
先のサンプルでは、directiveメソッドの第2引数に用意する関数では、オブジェクトをreturnするようにしていました。このやり方だと、オブジェクトに値を用意するぐらいしかできません。もっと複雑な処理はやりようがありませんね。
そこで、returnする値を「関数オブジェクト」にしてやるのです。そしてこの関数の中で必要な処理を行うようにすればいいのです。この場合の関数は、以下のような形で定義します。
returnする関数には、3つの引数が用意されています。これらは、それぞれ以下のような役割を果たします。
scope――これは、スコープのオブジェクトです。
element――このディレクティブのDOMエレメントです。
attrs――属性情報を扱うオブジェクトです。
ディレクティブのタグ内にあるテキストや、タグに用意した属性を利用するには、elementやattrsを使えばいいわけですね。これらのオブジェクトから必要な情報を取り出し操作すればいいのです。
ディレクティブでも、こうしたことは可能です。これには、directiveメソッドの引数として用意する関数を少し書き換える必要があります。
先のサンプルでは、directiveメソッドの第2引数に用意する関数では、オブジェクトをreturnするようにしていました。このやり方だと、オブジェクトに値を用意するぐらいしかできません。もっと複雑な処理はやりようがありませんね。
そこで、returnする値を「関数オブジェクト」にしてやるのです。そしてこの関数の中で必要な処理を行うようにすればいいのです。この場合の関数は、以下のような形で定義します。
function(){
return function(scope,element,attrs){
……必要な処理……
});
}
returnする関数には、3つの引数が用意されています。これらは、それぞれ以下のような役割を果たします。
scope――これは、スコープのオブジェクトです。
element――このディレクティブのDOMエレメントです。
attrs――属性情報を扱うオブジェクトです。
ディレクティブのタグ内にあるテキストや、タグに用意した属性を利用するには、elementやattrsを使えばいいわけですね。これらのオブジェクトから必要な情報を取り出し操作すればいいのです。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
※関連コンテンツ