Question

我有一个Angular应用程序显示＆＃34;卡＆＃34; （想想Google卡片）分为两栏。因此，我最终看起来有点像

<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中使用它。注意我意识到这可以用{{1}}来完成，但为什么这必须是一个单独的文件，如果我想在当前的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属性的元素内。

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

1 个答案: