25

私は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は、画像のギャラリーを処理する部分的なテンプレートである可能性があります。

任意の入力または方向をいただければ幸いです。

4

1 に答える 1

46

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

最善の策は、独自のディレクティブを追加することです。あなたの例を拡張する：

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

トランスクルージョンを使用して、コンテンツをより柔軟にします。今部分的：

<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>

上記の場合、AngularはのURLでパーシャルをトランスクルージョンします$scope.module.partialUrl。（編集：これは、ngIncludeで使用されるスコープ変数を置き換えることでUIを動的に置き換えることができることを意味します。素晴らしいですね？）

繰り返しのコードを避けるために同じパーシャルを再利用している場合は、URLを一重引用符で囲んでください。

<div ng-include="'/partial/foo.html'"></div>
于 2012-10-04T22:34:49.923 に答える