Question

我有时遇到问题，当模板条目没有在模板缓存中定义时，它会在重新加载页面后偶尔发生。

相关代码：

的index.html

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

查看/ templates.html

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

directive.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',

其他任何人都经历过这个或知道如何确保在指令运行之前加载和解析模板？这是一个有角色的错误？

Answer 1

Angular在遍历DOM时编译指令。你不能拥有它＆＃34;等待＆＃34;在指令上。您可以做什么，不是在模板加载之前显示指令。

我不认为这是一个很好的方法，因为它需要＆＃34;知识＆＃34;在该指令的用户方面：

<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模板（以防止双重请求），但它是一个＆＃34;懒惰的＆＃34;使用，因为您实际上不需要id === "templates.html"的模板。

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

然而，通常，我看到指令开发人员将模板嵌入到指令的.js文件中。这使得指令的用户可以加载单独的.html文件以使指令起作用。我想你可以用这种方式加载主题。

模板未加载

1 个答案: