ローカルの事前ロードされた (JST) テンプレート キャッシュから ng-include 部分ファイルをロードする

Question

次のような JavaScript 文字列配列にテンプレートをプリロードしています。 var t = JST['firstTemplate'], 、 どこ t のようになります、

<div>This scope has a value of {{value}}</div>

このプリロードされたテンプレートをどのように使用できますか? ng-include 指令？

このシナリオのテンプレートは、ネストされたビューとテンプレート、および独自のネストされたスコープとコントローラーを使用して、より複雑になる可能性があることに注意してください。それでは、ng-bind ディレクティブのいずれかが役立つかどうかはわかりません。

アップデート：

ソースを見てみると、 ng-include これを行う良い方法は、テンプレートの読み込みロジックをカスタマイズ可能なプロバイダーに分離することだと思われます。

現在のデフォルトの読み込みメカニズムは単に次のことを行います。 $http.get と $templateCache キャッシュプロバイダーとして。テンプレートのコンテンツを注入できるようです JST['firstTemplate'] テンプレート キャッシュに保存しますが、起動時にテンプレートごとにそれを行う必要があります。

$templateCache.put('firstTemplate', JST['firstTemplate']);

そして、

<div ng-include="firstTemplate"></div>

また、すべての ng-include と並行して、何らかの方法でテンプレートの事前キャッシュを実行するカスタム ディレクティブを作成することもできます。それはまた不格好に思えます。

アップデート #2

すでにプリロードされている JST ハッシュを使用するように、templateCache をオーバーライドしてみます。これが機能する場合は結果を投稿します。

Answer 1

これは私が働くことを見つけた解決策です、そして私が以前に考えていたようなハックではありませんでした（上記:-)基本的に標準$ PESFERS.Decoratorを使って$ templateCache.decoratorを使って$ TemplateCache.decoratorを使ってローカルを探すプリロードキャッシュ働くだけです。

angular.module('app').config([
  '$provide', 
  function($provide) {
    $provide.decorator('$templateCache', function($delegate, $sniffer) {
      var originalGet = $delegate.get;

      $delegate.get = function(key) {
        var value;
        value = originalGet(key);
        if (!value) {
          // JST is where my partials and other templates are stored
          // If not already found in the cache, look there...
          value = JST[key]();
          if (value) {
            $delegate.put(key, value);
          }
        }
        return value;
      };

      return $delegate;
    });

    return this;
  }
]);

.

JSTにこのものを持っているのか疑問に思うなら、私たちはすべての角度資産を提供するためにRails BackendとRails Asset Pipelineを使用します。JSTテンプレートを使用すると、すべてのテンプレートをバンドルして初期化中にそれらをアプリにロードし、パーシャルおよびその他のテンプレートコンテンツをフェッチするときに通常必要とされる追加のサーバーラウンドトリップを避けます。

上記のパッチは、これをすべて角度で作用させます。

Answer 2

の代わりに ng-include, 、 使用 ng-bind-html:

<div ng-bind-html="t"></div>

コントローラーのテンプレートを $scope:

$scope.t = JST['firstTemplate'];

含める必要があります ngSanitize サブモジュールとして (忘れずに追加してください) angular-sanitize.js あまりにも）：

angular.module('app', ['ngSanitize']);

Answer 3

今日私は同じ問題に直面しています、ここに私の解決策があります：

カスタムディレクティブ。テンプレートとしてJST "Server / Info"を返します。

/* jstTemplate.js */

/**
 * @desc template loader for JST templates
 * @example <div jst-template="server/info.html"></div>
 */


angular
    .module('myApp')
    .directive('jstTemplate', jstTemplate);

function jstTemplate() {
    return {
        restrict: 'A',
        template: function(element, attrs) {
            return JST[attrs.jstTemplate]();
        }
    }
};

.

使用：

<div class="box">
    <div jst-template="server/info.html"></div>
</div>

.

attrs.jstTemplateには、ディレクティブで提供されている値が含まれています。

歓声、 Niklas