模板未加载

Question

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

相关代码：

index.html

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

Views/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',

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

Answer 1

Angular 在遍历 DOM 时编译指令。您不能在指令中使用它 "wait"。您可以做的是在加载模板之前不显示指令。

我认为这不是一个好方法，因为它需要 "knowledge" 指令的用户：

<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 模板（以防止双重请求），但它是 "lazy" 用途，因为您实际上不需要模板id === "templates.html".

你当然可以把它抽象成一个服务，让它变得更好。

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

模板未加载

Template not loading

javascript

angularjs

angularjs-directive

partial-views