2015-10-12 11 views
7

Sto usando angularUI typehead per l'elemento di input. Sto usando un modello personalizzato per mostrare i valori. Funziona tutto bene. La mia domanda è come separare lo ng-template in un file separato in modo che possa essere riutilizzato anche in altri file.Come separare ng-template in un file separato

Nel caso in cui le mie parole non sono chiare, si ricorda che mi riferisco a ng-templates specifico e non preoccupati separata altri contenuti HTML

Ecco il codice:

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

Mettere in un parziale non ha funzionato, per esempio: <div ng-include="app/client/bug/new/my-ng-template.partial.html"></div> tiri:

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

risposta

11

Non è necessario ng-include.

Spostare il modello in file separato, consente di dire il nome del file customTemplate.html e dei file contenuti come

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

Non includere <script type="text/ng-template" id="customTemplate.html"> tag quando viene spostato in un file separato.

utilizzare il percorso di file corretto come

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

Grazie, che ha funzionato. – Sudhakar

+0

Forse una domanda stupida, ma il template usa $ templateCache ad esempio quando non è nel tag Script con type = "text/template"? –

+0

Sì, è possibile utilizzare $ templateCache – Reza