ディレクティブを作ろう (5/7)
作成:2016-01-09 08:58
更新:2016-01-09 08:58
更新:2016-01-09 08:58
■OKディレクティブをHTMLに組み込む
では、作成した新しいOKディレクティブを使ってみましょう。利用例を下のリスト欄に掲載しておきました。
ここでは、いくつかの<ok>タグを記述してあります。それぞれの使い方を見てみるとこうなっていますね。
・属性なし
・size属性のみ
・color属性のみ
・size, color属性
このように、sizeとcolorの２つの属性を利用できます。これらの属性は、省略するとそれぞれsize="24pt", color="red"がデフォルトで設定されます。
また、いずれもタグ内に書かれているテキストがそのまま表示されていることがわかるでしょう。これで、「テキストの色と大きさを簡単に設定できるタグ」として、<ok>は実用的になってきましたね！
ここでは、いくつかの<ok>タグを記述してあります。それぞれの使い方を見てみるとこうなっていますね。
・属性なし
<ok>This is sample!</ok>
・size属性のみ
<ok size="36pt">This is size sample!</ok>
・color属性のみ
<ok color="blue">This is color sample!</ok>
・size, color属性
<ok color="green" size="48pt">This is full sample!</ok>
このように、sizeとcolorの２つの属性を利用できます。これらの属性は、省略するとそれぞれsize="24pt", color="red"がデフォルトで設定されます。
また、いずれもタグ内に書かれているテキストがそのまま表示されていることがわかるでしょう。これで、「テキストの色と大きさを簡単に設定できるタグ」として、<ok>は実用的になってきましたね！
(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>This is sample!</ok>
<hr>
<ok size="36pt">This is size sample!</ok>
<hr>
<ok color="blue">This is color sample!</ok>
<hr>
<ok color="green" size="48pt">This is full sample!</ok>
</body>
</html>
※関連コンテンツ