ディレクティブを作ろう (2/7)
作成:2016-01-09 08:52
更新:2016-01-09 08:52
更新:2016-01-09 08:52
■OKディレクティブを作る
では、実際に簡単なサンプルを作ってみることにしましょう。ここでは、「OK!」と出力をする、OKディレクティブを作ってみます。
まずは、スクリプトを作りましょう。前回まで使ってきた「script.js」を開き、以下のようにスクリプトを記述して下さい。
ここでは、directiveの第1引数に'ok'と指定をしています。第2引数には、return {template:○○}といった一文だけを実行する関数を用意してあります。ディレクティブの基本的な構造を知っていれば、そう難しいことをしているわけではないのがわかるでしょう。
では、これを実際に使ってみましょう。下のリスト欄にHTMLファイルのサンプルを挙げておきます。このWebページを開くと、赤い文字で「OK!」と表示されます。
リストを見ると、<ok></ok>というタグが記述されているのがわかるでしょう。これが、OKディレクティブを利用している部分です。HTMLには<ok />というタグはもちろん、ありません。この<ok />タグが、
このようにディレクティブを使えば、シンプルなオリジナルタグを使って複雑な表示も作ることができるようになります。
まずは、スクリプトを作りましょう。前回まで使ってきた「script.js」を開き、以下のようにスクリプトを記述して下さい。
var myapp = angular.module('myapp',[]);
myapp.directive('ok', function(){
return {
template:'<span style="font-size:24pt;color:red;">OK!</span>'
};
});ここでは、directiveの第1引数に'ok'と指定をしています。第2引数には、return {template:○○}といった一文だけを実行する関数を用意してあります。ディレクティブの基本的な構造を知っていれば、そう難しいことをしているわけではないのがわかるでしょう。
では、これを実際に使ってみましょう。下のリスト欄にHTMLファイルのサンプルを挙げておきます。このWebページを開くと、赤い文字で「OK!」と表示されます。
リストを見ると、<ok></ok>というタグが記述されているのがわかるでしょう。これが、OKディレクティブを利用している部分です。HTMLには<ok />というタグはもちろん、ありません。この<ok />タグが、
<span style="font-size:24pt;color:red;">OK!</span>というタグに変換されているのです。
このようにディレクティブを使えば、シンプルなオリジナルタグを使って複雑な表示も作ることができるようになります。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!doctype html>
<html>
<head>
<title>AngularJS Sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
<style>
body { color:gray; }
h1 { font-size:18pt; font-weight:bold; }
</style>
</head>
<body ng-app="myapp" ng-init="num=0">
<h1>ディレクティブ</h1>
<ok></ok>
</body>
</html>
※関連コンテンツ