>>  賞品はこちらで紹介しています 
AngularJS TIPS

AngularJS TIPS

ディレクティブ配下のコンテンツをテンプレートに反映させるには?(transcludeプロパティ)

2016年9月26日

自作ディレクティブ呼び出し側で指定した「配下のコンテンツ」をテンプレートに反映させることで、そのディレクティブ要素の下に埋め込まれるHTMLコードを動的に切り替える方法を説明する。

  • このエントリーをはてなブックマークに追加

 別稿「TIPS:ディレクティブを自作するには?」では、自作ディレクティブを呼び出した要素の配下に、そのディレクティブのテンプレートとして指定したHTMLコードを埋め込む方法を紹介しました。しかし、与えられたテンプレートをそのまま出力するだけでは、あまり意味がありません。

 そこで本稿では、自作ディレクティブ呼び出し側で指定したコンテンツを、そのディレクティブのテンプレートに反映させたうえで、完成したテンプレートのHTMLコードをそのディレクティブ要素の配下に埋め込む方法について紹介します。これによって、テンプレートの骨組みはテンプレートとして準備しておいて、一部のコンテンツだけを呼び出し元から動的に切り替えることが可能になりますので、より汎用的なディレクティブを作成できます。

 では、具体的な例を見てみましょう。以下は、「おはようございます、●○さん!」というメッセージを表示するwg-hello-varディレクティブの例です。「●○」の部分は、ディレクティブの呼び出し側から指定できるものとします。

HTML
<!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>
ディレクティブで指定したテキストをテンプレートに反映させる例(transclude.html)
呼び出し側で指定した名前に応じてあいさつのメッセージを生成
呼び出し側で指定した名前に応じてあいさつのメッセージを生成

 テンプレートに後からコンテンツを埋め込めるようにするには、truncludeプロパティをtrueにします(1)。あとは、テンプレートに対してコンテンツの埋め込み場所を<ng-transclude>要素(ディレクティブ)として指定するだけです(2)。

 ブラウザーの開発者ツールからも、以下のようなHTMLソースが生成されていることを確認しておきましょう。

HTML
<wg-hello-var>
  <p style="background-color:Yellow">こんにちは、
    <span ng-transclude>
      <span class="ng-scope">山田太郎</span>
    </span>さん!
  </p>
</wg-hello-var>
wg-hello-varディレクティブによって出力されたHTMLソース(該当箇所を抜粋)
処理対象:ディレクティブ カテゴリ:基本
処理対象:自作 カテゴリ:ディレクティブ
API:angular.Module カテゴリ:ng(コアモジュール) > type(型)

※以下では、本稿の前後を合わせて5回分(第72回~第76回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

72. ディレクティブを自作するには?(directiveメソッド)

AngularJSで、ビューの操作/生成を独立させて独自ディレクティブを作成する基本的な定義方法と使用例を説明する。

73. ディレクティブで利用するテンプレートを外部ファイル化するには?(templateUrlプロパティ)

ビューの操作/生成を定義した自作ディレクティブのテンプレートを外部ファイル化して利用する方法を解説。また、ビューの中で<script>要素としてテンプレートを宣言する方法も説明する。

74. 【現在、表示中】≫ ディレクティブ配下のコンテンツをテンプレートに反映させるには?(transcludeプロパティ)

自作ディレクティブ呼び出し側で指定した「配下のコンテンツ」をテンプレートに反映させることで、そのディレクティブ要素の下に埋め込まれるHTMLコードを動的に切り替える方法を説明する。

75. ディレクティブで属性を設定するには?(scopeプロパティ)

自作ディレクティブ呼び出し側で指定した「属性の値(文字列)」をテンプレートに反映させることで、そのディレクティブ要素の下に埋め込まれるHTMLコードを動的に切り替える方法を説明する。

76. 自作ディレクティブの属性にAngular式や関数を設定するには?(scopeプロパティ)

自作ディレクティブ呼び出し側で指定した「属性の値(Angular式や関数)」をテンプレートに反映させることで、そのディレクティブ要素の下に埋め込まれるHTMLコードを動的に切り替える方法を説明する。

GrapeCity Garage 記事内容の紹介

Azure Central の記事内容の紹介

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • 日本マイクロソフト株式会社
  • グレープシティ株式会社