AngularJS - 在没有 AJAX 调用的情况下重用 HTML 模板代码

Question

我有一个 Angular 应用程序，它在两列中显示“卡片”（想想 Google 卡片）。因此，我最终得到的 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 页面中指定模板呢？

Answer 1

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属性的元素内。