loading common templates into an html page with angular

Question

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?

Possible duplicate of AngularJs Include Partial Template

Venkat.R
– Venkat.R

2015-12-30 19:38:03 +00:00
Commented Dec 30, 2015 at 19:38 — Venkat.R
– Venkat.R, Commented Dec 30, 2015 at 19:38

Pankaj Parkar · Accepted Answer · 2015-12-30 19:40:08Z

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>

edited Dec 30, 2015 at 19:40

answered Dec 30, 2015 at 19:34

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Venkat.R Over a year ago

mention the symbol name as well to help the user !

Collectives™ on Stack Overflow

loading common templates into an html page with angular

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related