AngularJS - Partialsを他の部分の中で動的に使用する

Question

私はAngularJSには比較的新しいので、部分的なテンプレートを動的に引き出すことがどれほど可能かを知りたがっています。この抽象化された（この例では単純化された）モジュールを考えてみましょう。これ自体は、アプリケーション全体で再利用される部分的なテンプレートになります。

部分的なモジュールマークアップ

<div class="module"> 
    <h2 class="module-title">{{module.title}}</h2> 

    <div class="module-content"> 
     {{module.content}} 
    </div> 

</div> 

いくつかのデータのクライアント側をフェッチした後、私はテキストの単純な文字列、そこに何の問題であることをmodule.contentために望むことができます。私が作業しているデータに基づいて、他の部分テンプレートをmodule.contentに動的に挿入できたら便利です。たとえば、私の回答では私が表示したい見出しのリストを持っていますが、見出しを扱う部分的なテンプレートを引き出すことは可能ですか？また、別の場所では、module.contentは画像のギャラリーを扱う部分的なテンプレートになる可能性があります。

すべての入力または指示をいただければ幸いです！

Answer 1

利用できるアプローチはいくつかあります。

あなたの最善の策はあなた自身のdirectiveを追加することです。あなたの例を挙げる：

module.directive('myModule', function() { 
    return { 
    restrict: 'A', 
    scope : { 
     title : '@' 
    }, 
    templateUrl : '/partial/module.html', 
    transclude : true 
    }; 
}); 

コンテンツをより柔軟にするために、transclusionを使用します。今部分：インストールこのディレクティブで

<div class="module"> 
    <h2 class="module-title">{{title}}</h2> 

    <div class="module-content" ng-transclude></div> 
</div> 

、次のHTMLを使用することができます。

<div my-module title="{{module.title}}"> 
    {{module.content}} 
</div> 

別のオプションはng-includeディレクティブを使用することです。これは、部分の単純なトランスクルー、それに含まれていたコンテキストと同じ範囲内に部分的生命をトランスクルードことである差である。上記の場合

<div ng-include="module.partialUrl"></div> 

、角度位置はURLでの部分をtranscludeます$scope.module.partialUrl。 （編集：これは、ngIncludeで使用されているスコープ変数を置き換えることで、UIを動的に置き換えることができることを意味します）。

繰り返すコードを避けるために同じ部分を再利用するだけの場合は、見積もり：

<div ng-include="'/partial/foo.html'"></div>