AngularJS TIPS
ディレクティブで利用するテンプレートを外部ファイル化するには？（templateUrlプロパティ）
ビューの操作／生成を定義した自作ディレクティブのテンプレートを外部ファイル化して利用する方法を解説。また、ビューの中で＜script＞要素としてテンプレートを宣言する方法も説明する。
別稿「TIPS：ディレクティブを自作するには？」では、ごく基本的なディレクティブとして、あらかじめ用意された文字列を表示するだけのwg-helloディレクティブを例に、ディレクティブの定義方法を紹介しました。その例では、templateプロパティを利用して、テンプレート文字列もディレクティブ定義の中に埋め込んでいました。
しかし、一般的なアプリでは、ディレクティブのロジック部分と、ビュー（テンプレート）とが混在しているのは望ましい状態ではありません。サンプルのような用途を除いては、テンプレートは別ファイルとして外部化するのが原則です。そして、テンプレートを外部化するには、ディレクティブオブジェクトでtemplateUrlプロパティを指定します。
以下は、別稿のサンプルをtemplateUrlプロパティで書き換えた例です。
|
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<wg-hello></wg-hello>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script>
angular.module('myApp', [])
.directive('wgHello', function() {
return {
restrict: 'E',
templateUrl: 'wg_hello.html'
}
})
.controller('MyController', ['$scope', function($scope) {
}]);
</script>
</body>
</html>
|
|
<p style="background-color:Yellow">こんにちは、世界！</p>
|
<script>要素でテンプレートを定義する
テンプレートはビューの中で<script>要素として宣言しておくこともできます。この場合、templateUrlプロパティには<script>要素のid属性で指定した値を指定します。
|
<script>
angular.module('myApp', [])
.directive('wgHello', function() {
return {
restrict: 'E',
templateUrl: 'wg_hello2.html'
}
})
……中略……
</script>
<script type="text/ng-template" id="wg_hello2.html">
<p style="background-color:Yellow">こんにちは、世界！</p>
</script>
|
処理対象：自作 カテゴリ：ディレクティブ
API：angular.Module カテゴリ：ng（コアモジュール） > type（型）
※以下では、本稿の前後を合わせて5回分（第71回～第75回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
71. AngularJSのコントローラーを単体テストするには？
テスティングフレームワーク「Karma＋Jasmin」を使って、AngularJSの「コントローラー」の単体テストを記述し、それを実行する方法を解説する。
73. 【現在、表示中】≫ ディレクティブで利用するテンプレートを外部ファイル化するには？（templateUrlプロパティ）
ビューの操作／生成を定義した自作ディレクティブのテンプレートを外部ファイル化して利用する方法を解説。また、ビューの中で＜script＞要素としてテンプレートを宣言する方法も説明する。
74. ディレクティブ配下のコンテンツをテンプレートに反映させるには？（transcludeプロパティ）
自作ディレクティブ呼び出し側で指定した「配下のコンテンツ」をテンプレートに反映させることで、そのディレクティブ要素の下に埋め込まれるHTMLコードを動的に切り替える方法を説明する。
75. ディレクティブで属性を設定するには？（scopeプロパティ）
自作ディレクティブ呼び出し側で指定した「属性の値（文字列）」をテンプレートに反映させることで、そのディレクティブ要素の下に埋め込まれるHTMLコードを動的に切り替える方法を説明する。
