Question

我正在尝试使用$ templateCache预加载我的模板。但是，当我的应用中的视图最初加载时，它不会在浏览器中呈现。只有在我第二次返回路线后才能渲染模板。可能导致这种情况的原因是什么？

我正在将模板预加载到这样的模块中：

angular.module("templateCache", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("views/view2/view2.html", "<script type=\"text/ng-template\" id=\"views/view2/view2.html\">\n<p>This is the partial for view 2.</p>\n$templateCache: {{ $templateCache }}\n</script>");
  $templateCache.put("views/view1/view1.html", "<script type=\"text/ng-template\" id=\"views/view1/view1.html\">\n<p>This is the partial for view 1.</p>\n$templateCache: {{ $templateCache }}\n</script>");
}]);

然后我要求将此模块作为我的app模块中的依赖项，并使用templateUrl在我的app控制器中使用这些模板，如下所示：

angular.module("myApp", ["ngRoute", "templateCache", "myApp.view1", "myApp.view2"]).config(["$routeProvider", function(e) {
  e.otherwise({
      redirectTo: "/view1"
  })
}]), angular.module("myApp.view1", ["ngRoute"]).config(["$routeProvider", function(e) {
  e.when("/view1", {
      templateUrl: "views/view1/view1.html",
      controller: "View1Ctrl"
  })
}]).controller("View1Ctrl", ["$templateCache", function(e) {
   console.log(e.get("views/view1/view1.html"))
}]), angular.module("myApp.view2", ["ngRoute"]).config(["$routeProvider", function(e) {
  e.when("/view2", {
      templateUrl: "views/view2/view2.html",
      controller: "View2Ctrl"
  })
}]).controller("View2Ctrl", [function() {}]);

请参阅此Plunker演示我的问题：http://plnkr.co/edit/4rcR8aZQ8fiIRrzsLPiR

Answer 1

您不应将这些<script>标记粘贴到缓存视图。

$templateCache.put("views/view1/view1.html", "<p>This is the partial for view 1.</p>");
$templateCache.put("views/view2/view2.html", "<p>This is the partial for view 2.</p>");

我用你的plunker演示测试它，并且一切似乎都正常。

Angular.js模板在离开并返回路径之前不会呈现

1 个答案: