使用 Angular 将常用模板加载到 html 页面中

Question

我有一个页面，其中包含在我的应用的多个页面中常见的详细信息部分。我正在尝试减少代码冗余并创建将与页面一起加载的这些迷你视图。

在主要的详细信息页面中，我尝试使用 ng-include 加载一个部分

<div ng-show="checkProducts()">
    <hr style="margin-bottom:5px!important"/>
      <p><strong><em>Products</em></strong></p>
         <div class="bs-associationPanel">
        <ng-include src="commontemplates/productView/shoes"></ng-include>
     </div>
</div>

我不能在这里使用路由，因为这就像主要详细信息页面中的部分视图，它已经使用路由来加载它并将其绑定到控制器。

src 值是 APP 中指向名为 productView.html 的 html 页面的路径

我将它包装在带有 id 的脚本 ng-template 标记中

 <script type="text/ng-template" id="shoes">
        <table class="table table-condensed table-responsive">
            <thead>
                <tr>
                    <th>brand</th>
                    <th>color</th>
                    <th>size</th>
                </tr>
            </thead>
            <tbody ng-repeat="s in detail.shoes">
                <tr>
                    <td>{{s.brand}}</td>
                    <td>{{s.color}}</td>
                    <td>{{s.size}}</td>                
                </tr>
            </tbody>
        </table>
    </script>

我希望这会起作用，但是当我渲染页面时，我没有找到任何寺庙，并且查看元素浏览器我看到以下内容

<!-- ngInclude: undefined -->

我想我很接近我只是不知道我错过了什么。关于如何实现或可以实现的任何建议？

Answer 1

基本上 text/ng-template 类型的脚本由 angular 读取，并且 angular 将其视为模板，然后将这些模板放入 $templateCache 服务中以便更快地检索。

src 属性的模板名称应该用' 单引号括起来，以便它可以通过$templateCache 查找以获取模板。

<ng-include src="'commontemplates/productView/shoes'"></ng-include>