加載NG-包括來自本地預加載（JST）模板緩存

我有我的模板預先加載在JavaScript字符串數組，像var t = JST['firstTemplate']，其中t會是什麼樣的諧音，加載NG-包括來自本地預加載（JST）模板緩存

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

我怎麼能在ng-include指令中使用這個預加載模板？

請注意，在這種情況下，我的模板可能更復雜，可能具有嵌套視圖和模板以及它們自己的嵌套範圍和控制器。所以我不確定是否有任何ng-bind指令會有幫助？

UPDATE：

綜觀ng-include源看來，要做到這一點的好辦法是分離的模板加載邏輯成一個可定製的提供者。

當前的默認加載機制只是將$http.get與$templateCache作爲緩存提供者。看起來我可以將我的模板內容注入模板緩存中，但我必須在啓動時爲每個模板創建模板內容。

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

再有，

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

我也可以寫去並排每NG-包括以某種方式做的模板，這個預緩存自定義指令。這又似乎笨重。

更新＃2

我要去嘗試重寫templateCache，以便它使用我已預先加載JST哈希值。如果這項工作可以發佈結果，

來源

2014-02-27 Shyam Habarakada

只爲協議：''

如果不傳遞一個字符串到NG-包括，它試圖從這個名稱的範圍變量中獲得的價值。 – Armin

這是我發現的解決方案，它不像我以前想的那樣是一種破解（上面:-)基本上，使用標準的$ provide.decorator修飾$ templateCache.get方法，加載緩存。它只是工作。

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，我們使用了導軌後端和軌道資產管道提供所有角度的資產。 JST模板允許我們在初始化期間捆綁所有模板並將它們加載到應用程序中，並避免在獲取部分和其他模板內容時通常需要額外的服務器往返。

上面的補丁使所有這些工作與角度。今天

來源

2014-02-28 16:06:45

謝謝你的補丁。我正在使用原始的JST源代碼。現在玩這個。 – geilt

相反的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-27 21:47:07 asgoth

從這些文檔看來，ng-bind-html不會編譯模板，也不會像ng-include那樣執行其他操作，例如爲其創建新的範圍。我想要所有這些發生。我誤解了如何ng-bind-html的作品？ –

你可以使用'$ compile'服務。 – asgoth

幾乎看起來像我們需要ng-include上的一個選項來告訴它使用模板緩存。 – boatcoder

我面臨着同樣的問題，這裏是我的解決方案：

自定義指令，它返回JST 「服務器/信息」爲模板：

/* 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包含我們在指令中提供的值。

乾杯，尼克拉斯

來源

2017-07-25 09:21:06 Niklas

加載NG-包括來自本地預加載（JST）模板緩存

回答

相關問題