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

我将尝试覆盖templateCache，以便它使用我已经预先加载的JST哈希。如果有效，会发布结果。

Answer 1

这是我发现工作的解决方案，它不像我之前想的那样（上面:-)基本上，使用标准的$ 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中拥有这些东西，我们使用rails后端和rails资产管道来提供所有角度资产。 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包含我们在指令中提供的值。

干杯，尼古拉斯

从本地预加载（JST）模板缓存加载ng-include部分

3 个答案: