AngularJSカスタムディレクティブのtranscludeオプション、ng-transcludeディレクティブの使用例

AngularJSカスタムディレクティブのtranscludeオプション、ng-transcludeディレクティブの使用例をまとめました。

デモとコードサンプルはこちら。
　

（１）概要

　
下記のようにカスタムディレクティブ内に記述したコンテンツをテンプレート内のパネルボディ部に挿入したい場合を考えます。
　
（HTML内のカスタムディレクティブ）
<panel>”カスタムディレクティブ内のコンテンツ”</panel>
　
（カスタムディレクティブのテンプレート）
<div class=”panel panel-default”>
　<div class=”panel-heading”>
　　<h4>{{title}}</h4>
　</div>
　<div class=”panel-body”>
　　<p>”カスタムディレクティブ内のコンテンツ”</p>
　</div>
</div>
　
transcludeオプションを使用せず、templateオプションのみを使用した場合、カスタムディレクティブ内に記述したコンテンツはtemplateで定義した内容に置き換わってしまいます。
　
transcludeオプションを使用すると、カスタムディレクティブ内で記述コンテンツをテンプレート内の指定した場所に埋め込む事が出来ます。
　

（２）transcludeオプション、ng-transcludeディレクティブの使用方法

　
①カスタムディレクティブの定義でtranscludeオプションを設定
　

demoApp.directive("panel", function () {
  return {
    restrict: "E",
    scope: { title:'@' },
    transclude: true,
  }
});

　
②HTMLでカスタムディレクティブを適用
　
<panel title=”{{title}}”>{{text}}</panel>
　
③ng-transcludeディレクティブでテンプレート内の埋め込む場所を指定
　
テンプレート内の埋め込みたい場所にng-transcludeを指定します。

<div class="panel panel-default">
  <div class="panel-heading">
    <h4>{{title}}</h4>
  </div>
  <div class="panel-body">
    <p ng-transclude></p>
  </div>
</div>

　
※ng-transcludeのスコープ
　
サンプルコードでは下記構成になっていて、コントローラ（”transCtrl”）とカスタムディレクティブ（”panel”）とng-transcludeディレクティブでそれぞれスコープを持っています。
　
<div ng-controller=”transCtrl”>
<panel title=”{{title}}”>{{text}}</panel>
</div>
　
ng-transcludeディレクティブのスコープは親スコープ（”transCtrl”）から継承され新しく生成されたスコープで隔離スコープといえます。
　
カスタムディレクティブも隔離スコープとして設定しているので、ng-trnscludeとカスタムディレクティブのスコープは同じ親スコープから継承されて生成された兄弟の関係で、互いに隔離されています。
　
ng-transcludeが設定されているとAngularJSは、カスタムディレクティブ内に記述されたコンテンツ（{{text}}）をテンプレートの内容で置換する前にコピーして退避し、テンプレート内に埋め込みます。{{text}}は親スコープ（”transCtrl”コントローラ）で定義された変数ですが、transcludeディレクティブのスコープは親スコープを継承しているので参照する事が出来ます。