angularjs - 从本地预加载 (JST) 模板缓存加载 ng-include 部分

Question

我将模板预加载到 javascript 字符串数组中，例如 var t = JST['firstTemplate'] , 其中 t会像，

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

如何在 ng-include 中使用这个预加载的模板？指示？

请注意，我在这种情况下的模板可能更复杂，可能包含嵌套 View 和模板以及它们自己的嵌套范围和 Controller 。所以我不确定是否有任何 ng-bind 指令会有所帮助？

更新:

看 ng-include的出处似乎这样做的一个好方法是将模板加载逻辑解耦到可定制的提供程序中。

当前的默认加载机制只是执行 $http.get与 $templateCache作为缓存提供者。看来我可以在 JST['firstTemplate'] 中注入(inject)我的模板内容进入模板缓存，但我必须在启动时为每个模板执行此操作。

$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 Assets 管道来交付所有 Angular Assets 。 JST 模板允许我们捆绑所有模板并在初始化期间将它们加载到应用程序中，并避免在获取部分和其他模板内容时通常需要的额外服务器往返。

上面的补丁使所有这些都适用于 Angular 。