AngularJS - 重复使用不带AJAX调用的HTML模板代码

我有一个Angular应用程序，它在两列中显示“卡”（认为是Google卡）。正因为如此我结束了HTML看起来有点像AngularJS - 重复使用不带AJAX调用的HTML模板代码

<div class="leftColumn"> 
    <div ng-repeat="module in Modules"> 
     <span>{{module.UpTime.TotalTime}}</span> 

     <h2>{{module.ModuleName}}</h2> 
     ... 
    </div> 
</div> 

<div class="rightColumn"> 
    <!-- I want the template here too :) --> 
</div>

我怎么能只写一次这样的内leftColumn模板代码，它可以在两个leftColumn和rightColumn使用。注意我知道这可以用ng-include完成，但为什么这必须是一个单独的文件，如果我想在我的当前HTML页面中指定模板，该怎么办？

来源

2014-11-25 Chris

可能像https://gist.github.com/whisher/0dc3f28d89cfc2a9b875是我已经被骗了:) – Whisher 2014-11-25 11:06:23

See documentation关于如何在单个页面中嵌入多个模板。然后只需使用ng-include，它们将从本地缓存中加载，无需任何远程调用。

，并使其更容易，这里有一个code sample你：

<!-- include this somewhere inside the element with `ng-app` attribute ... --> 
<script type="text/ng-template" id="/tpl.html"> 
    <div ng-repeat="module in Modules">...</div> 
</script> 

<!-- ... and then use the template as you would a remote one --> 
<div class="leftColumn" ng-include="'/tpl.html'"></div> 
<div class="rightColumn" ng-include="'/tpl.html'"></div>

请记住，使用<script>这种方式意味着编译它作为一个AngularJS指令，所以它必须是元素中与ng-app属性。

来源

2014-11-25 11:05:30 hon2a

我不想通过外部HTML页面包含它！ – Chris 2014-11-25 11:13:30

您是否阅读过我所说的“在单个页面中包含多个模板”的部分？_？（然后，我会将其改为“嵌入”_）。您是否查看链接的文档？ – hon2a 2014-11-25 11:15:37

对不起我的坏 – Chris 2014-11-25 11:21:14

AngularJS - 重复使用不带AJAX调用的HTML模板代码

回答

相关问题