如何在单独的文件中分离 ng-template

Question

我使用 angularUI typehead 作为输入元素。我正在使用自定义模板来显示值。一切正常。我的问题是如何将 ng-template 分离到一个单独的文件中，以便它也可以在其他文件中重复使用。

如果我的话不清楚，请注意我指的是 ng-templates，而不关心单独的其他 html 内容

代码如下：

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

把它放在一个部分中是行不通的，例如： <div ng-include="app/client/bug/new/my-ng-template.partial.html"></div> 抛出：

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

Answer 1

你不需要ng-include。

将模板移动到单独的文件中，假设文件名 customTemplate.html 和文件内容如

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

将 <script type="text/ng-template" id="customTemplate.html"> 标记移动到单独的文件中时不包括它。

像

一样使用正确的文件路径

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

如何在单独的文件中分离 ng-template

How to separate ng-template in separate file

angularjs

angular-ui-bootstrap

angularjs-ng-template