AngularJS TIPS
ディレクティブ配下のコンテンツをテンプレートに反映させるには？（transcludeプロパティ）
自作ディレクティブ呼び出し側で指定した「配下のコンテンツ」をテンプレートに反映させることで、そのディレクティブ要素の下に埋め込まれるHTMLコードを動的に切り替える方法を説明する。
別稿「TIPS：ディレクティブを自作するには？」では、自作ディレクティブを呼び出した要素の配下に、そのディレクティブのテンプレートとして指定したHTMLコードを埋め込む方法を紹介しました。しかし、与えられたテンプレートをそのまま出力するだけでは、あまり意味がありません。
そこで本稿では、自作ディレクティブ呼び出し側で指定したコンテンツを、そのディレクティブのテンプレートに反映させたうえで、完成したテンプレートのHTMLコードをそのディレクティブ要素の配下に埋め込む方法について紹介します。これによって、テンプレートの骨組みはテンプレートとして準備しておいて、一部のコンテンツだけを呼び出し元から動的に切り替えることが可能になりますので、より汎用的なディレクティブを作成できます。
では、具体的な例を見てみましょう。以下は、「おはようございます、●○さん！」というメッセージを表示するwg-hello-varディレクティブの例です。「●○」の部分は、ディレクティブの呼び出し側から指定できるものとします。
|
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<wg-hello-var>山田太郎</wg-hello-var>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script>
angular.module('myApp', [])
.directive('wgHelloVar', function() {
return {
restrict: 'E',
// 1truncludeプロパティをtrueに設定
transclude: true,
// 2埋め込み場所を<ng-transclude>要素で指定
template: '<p style="background-color:Yellow">こんにちは、<span ng-transclude></span>さん！</p>'
}
})
.controller('MyController', ['$scope', function($scope) {
}]);
</script>
</body>
</html>
|
テンプレートに後からコンテンツを埋め込めるようにするには、truncludeプロパティをtrueにします（1）。あとは、テンプレートに対してコンテンツの埋め込み場所を<ng-transclude>要素（ディレクティブ）として指定するだけです（2）。
ブラウザーの開発者ツールからも、以下のようなHTMLソースが生成されていることを確認しておきましょう。
|
<wg-hello-var>
<p style="background-color:Yellow">こんにちは、
<span ng-transclude>
<span class="ng-scope">山田太郎</span>
</span>さん！
</p>
</wg-hello-var>
|
処理対象：自作 カテゴリ：ディレクティブ
API：angular.Module カテゴリ：ng（コアモジュール） > type（型）
※以下では、本稿の前後を合わせて5回分（第72回～第76回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
73. ディレクティブで利用するテンプレートを外部ファイル化するには？（templateUrlプロパティ）
ビューの操作／生成を定義した自作ディレクティブのテンプレートを外部ファイル化して利用する方法を解説。また、ビューの中で＜script＞要素としてテンプレートを宣言する方法も説明する。
74. 【現在、表示中】≫ ディレクティブ配下のコンテンツをテンプレートに反映させるには？（transcludeプロパティ）
自作ディレクティブ呼び出し側で指定した「配下のコンテンツ」をテンプレートに反映させることで、そのディレクティブ要素の下に埋め込まれるHTMLコードを動的に切り替える方法を説明する。
75. ディレクティブで属性を設定するには？（scopeプロパティ）
自作ディレクティブ呼び出し側で指定した「属性の値（文字列）」をテンプレートに反映させることで、そのディレクティブ要素の下に埋め込まれるHTMLコードを動的に切り替える方法を説明する。
76. 自作ディレクティブの属性にAngular式や関数を設定するには？（scopeプロパティ）
自作ディレクティブ呼び出し側で指定した「属性の値（Angular式や関数）」をテンプレートに反映させることで、そのディレクティブ要素の下に埋め込まれるHTMLコードを動的に切り替える方法を説明する。
