0

I have a page which contains detail sections that are common across multiple pages of my app. I am trying to reduce code redundancy and create these mini views that will be loaded with the page.

In the main detail page I have a section that I am trying to load using 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>

I can't use routing here as this is acting like a partial view within the main detail page which is already using routes to load it and bind it to the controller.

The src value is a path in the APP to an html page called productView.html

I wrapped it in a script ng-template tag with an id

 <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>

I was hoping this would work but when I render the page I get no temple and looking at the element explorer I see the following

<!-- ngInclude: undefined -->

I think I am close I just don't know what I am missing. Any suggestions on how this could be accomplished or Can this be accomplished?

rlcrews
  • 3,482
  • 19
  • 66
  • 116
  • Possible duplicate of [AngularJs Include Partial Template](http://stackoverflow.com/questions/22329769/angularjs-include-partial-template) – Venkat.R Dec 30 '15 at 19:38

1 Answers1

1

Basically the script's with type text/ng-template are read by angular & angular consider it as template then put those templates inside $templateCache service for faster retrieval.

src attribute should have template name enclosed with ' single quotes, so that it can look up through $templateCache for getting the template.

<ng-include src="'commontemplates/productView/shoes'"></ng-include>
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299