So trennen Sie ng-template in einer separaten Datei

Question

Ich verwende angularUI typehead für das Eingabeelement. Ich verwende eine benutzerdefinierte Vorlage, um die Werte anzuzeigen. Alles funktioniert gut. Meine Frage ist, wie kann ich die ng-template in eine separate Datei trennen, so dass es auch in anderen Dateien wiederverwendet werden kann.

Falls meine Worte nicht klar sind, bitte beachten Sie, dass ich bin auf ng-templates speziell und nicht um getrennten anderen HTML-Inhalt

Hier ist der 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 es in eine teilweise nicht funktioniert, zB: <div ng-include="app/client/bug/new/my-ng-template.partial.html"></div> wirft:

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

Answer 1

Sie brauchen nicht ng-include.

die Vorlage in separate Datei verschieben, sagen lässt den Dateinamen customTemplate.html und Dateiinhalte wie

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

nicht <script type="text/ng-template" id="customTemplate.html"> Tag sind Sie, wenn es in separate Datei verschoben wird.

Verwenden Sie den richtigen Dateipfad wie

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