javascript - 模板未加载

Question

我有时会遇到一个问题，当模板缓存中未定义模板条目时，重新加载页面后每隔一段时间就会发生一次。

相关代码:

index.html

<div ng-include src="'Views/templates.html'"></div>

View /templates.html

<script type="text/ng-template" id="customTemplate/spare-request-item.html">    
  <div>..</div>
</script>

指令.js

.directive("spare", function ($templateCache) {
console.log($templateCache.info());, //return length 30 when it fails, 31 otherwise
console.log($templateCache.get('customTemplate/spare-request-item.html'));//return undefined when it fails
return {
    ..
    templateUrl: 'customTemplate/spare-request-item.html',

还有其他人经历过这种情况或者知道如何确保在指令运行之前加载并解析模板吗？这是一个 Angular 错误吗？

Answer 1

Angular 在遍历 DOM 时编译指令。你不能让它“等待”指令。您可以做的是，在模板加载之前不要显示指令。

我认为这不是一个好方法，因为它需要指令用户的“知识”:

<div ng-include="'Views/templates.html'" 
     onload="$root.templatesLoaded = true"></div>

<my-directive ng-if="templatesLoaded"></my-directive>

另一种方法是手动加载所有模板和指令的特定模板。以下是执行此操作的概念方法:

app.directive("foo", function($templateRequest, $templateCache, $compile) {
  return {
    link: function(scope, element) {
      $templateRequest("templates.html")
        .then(function(templateContainer) {
          $compile(templateContainer);
          return undefined; // just to show that no need to return anything
        })
        .then(function() {
          var template = $templateCache.get("foo.html");
          if (template) {
            element.html(template);
            $compile(element.contents())(scope);
          }
        });
    }
  }
});

plunker

此处使用

$templateRequest 因为它缓存 templates.html 模板(以防止双重请求)，但这是一种“惰性”使用，因为您将实际上并不需要带有 id === "templates.html" 的模板。

当然，您可以将其抽象为服务，以使其变得更好。

但是，我通常看到指令开发人员将模板嵌入到指令的 .js 文件中。这使指令的用户无需加载单独的 .html 文件即可使指令发挥作用。我想你可以通过这种方式加载主题。