angularjsangular-ui-bootstrapangularjs-ng-template

How to separate ng-template in separate file


I'm using angularUI typehead for the input element. I'm using custom template to show the values. Its all working fine. My question is how do i separate the ng-template into a separate file so that it can be re-used in other files as well.

In case my words are not clear, please note that I'm referring to ng-templates specifically and not concerned about separate other html content

Here's the code:

 // custom template begin 
 // this is the ng-template
 // I'd like to move this custom template into to another file 
 // similar to partials
 <script type="text/ng-template" id="customTemplate.html">
    <a>
        <b>{{match.model.name}}</b>
        <div>{{match.model.username}}</div>
    </a>
</script>
 //custom template end


// input element makes use of the ng-template defined above
<div class="form-group">
<label class="col-md-2 control-label normal" for="assignTo">Assign To</label>
 <div class="col-md-3">
    <input name="bug_assignTo" id="bug_assignTo" ng-model="bug.assignTo" typeahead="user.username as user.name for user in config.users | filter:$viewValue | limitTo:8" class="form-control input-sm" typeahead-on-select="bug.assignTo = $item" placeholder="type name" typeahead-template-url="customTemplate.html"></input>
 </div>

Putting it in a partial did not work, e.g: <div ng-include="app/client/bug/new/my-ng-template.partial.html"></div> throws:

Tried to load angular more than once.
 [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
...
....

Solution

  • You don't need ng-include.

    Move the template into separate file, lets say the file name customTemplate.html and file contents like

    <a>
        <b>{{match.model.name}}</b>
        <div>{{match.model.username}}</div>
    </a>
    

    Don't include <script type="text/ng-template" id="customTemplate.html"> tag when it is moved into separate file.

    Use the correct file path like

    <input name="bug_assignTo" 
                   id="bug_assignTo" 
                   ng-model="bug.assignTo" 
                   typeahead="user.username as user.name for user in config.users | filter:$viewValue | limitTo:8" 
                   class="form-control input-sm" 
                   typeahead-on-select="bug.assignTo = $item" 
                   placeholder="type name" 
                   typeahead-template-url="customTemplate.html" /> <!--put correct physical path here, if it is inside partial folder then use partial/customTemplate.html-->