用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

基本上，通過angular和angular讀取類型為text/ng-template的腳本，將其視為模板，然后將這些模板放入$templateCache服務中，以加快檢索速度。

src屬性應該有附帶模板名稱'單引號，以便它可以查看通過$templateCache用於獲取模板。

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