angularJs : ng-include 中的 ng-template

Question

我有很多小模板，所以我将它们放在一个 html 文件中。

smallTemlates.html

<script type="text/ng-template" id="template1.html">
...
</script>
<script type="text/ng-template" id="template2.html">
...
</script>

然后我在 index.html.

中包含 smallTemlates.html

index.html

  <body  ng-app="myapp" id="my-app">
      <div ng-include="'pathTo/smallTemlates.html'"></div>
</body>

然后我尝试使用 $templateRequest 在我的 controller/service 中访问这些模板，但它抛出 404 错误。

  $templateRequest(component.popoverTemplateUrl).then(function(html) {  
     var template = html // 404 error
  });

但是如果我像下面那样将这些模板直接添加到 index.html 中，它就可以正常工作。

 <body  ng-app="myapp" id="my-app">
<script type="text/ng-template" id="template1.html">
...
</script>
<script type="text/ng-template" id="template2.html">
...
</script>
</body>

Answer 1

你应该使用 $templateCache 而不是 $templateRequest，因为你不需要再次请求模板。 ng-include 已经默认这样做了。

您必须等待下一个摘要才能获取模板的内容：

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope,$templateCache,$timeout) {

  $timeout(function(){
    var template = $templateCache.get('smallTemlates.html').then(function(html){
        console.log("smallTemlates");
        console.log(html.data); 
       $timeout(function(){
           var template1 = $templateCache.get('template1.html');
             console.log("template1");
             console.log(template1); 
       });
    });

  });
});

Html:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
 <link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

   <div ng-include="'smallTemlates.html'"></div>
</div>

</body>

smallTemplates.html

<script type="text/ng-template" id="template1.html">
template1zzasdfasdf
</script>
<script type="text/ng-template" id="template2.html">
template2
</script>

Plunker Link here（检查控制台的结果）

angularJs : ng-include 中的 ng-template

angularJs : ng-template inside ng-include

angularjs

angularjs-ng-include