Question

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

smallTemlates.html

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

然后我在smallTemlates.html内加入index.html。

index.html

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

然后我尝试使用$ templateRequest访问我的控制器/服务中的这些模板，但它会抛出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

1 个答案: