4

私は自分のテンプレートを 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 をオーバーライドしてみます。これが機能する場合、結果を投稿します。

4

3 に答える 3

6

これが私が見つけた解決策であり、以前に考えていたようなハックではありません（上記:-)キャッシュ。それだけで機能します。

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 バックエンドと Rails アセット パイプラインを使用してすべての角度アセットを提供しています。JST テンプレートを使用すると、すべてのテンプレートをバンドルして初期化中にアプリに読み込むことができ、パーシャルやその他のテンプレート コンテンツをフェッチするときに通常必要となる追加のサーバー ラウンドトリップを回避できます。

上記のパッチにより、これらすべてが角度付きで機能します。

于 2014-02-28T16:06:45.397 に答える
0

の代わりにng-include、次を使用しますng-bind-html。

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

コントローラーで、テンプレートを次の場所に配置します$scope。

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

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

angular.module('app', ['ngSanitize']);
于 2014-02-27T21:47:07.963 に答える