如何将 ngTemplate 的代码移动到实际文件中？

Question

我正在使用 AngularJS（不是 Angular）和 UI Bootstrap 的 Typeahead 指令。对于自定义，可以通过插入类型为 text/ng-template 的 script 标签来定义自定义模板。这工作正常，请参见下面的示例。

例子

<script type="text/ng-template" id="customTemplate.html">
  <a>
      <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
      <span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span>
  </a>
</script>

用法

<input type="text" ng-model="customSelected" placeholder="Custom template" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control" typeahead-show-hint="true" typeahead-min-length="0">

但是，当模板更复杂并且需要额外的 CSS 代码时，这很快就会变得混乱。此外，当代码被包裹在这样的 script 标记中时，我的代码编辑器无法正确突出显示代码。

有什么方法可以将此模板移动到实际文件 customTemplate.html（没有包装 script 标记），然后包含或引用它根据需要（即提前输入）？有一个带有文件扩展名的 id 也有点令人困惑，但随后就地定义了模板。

来源

上面的例子是基于UIBootstrap的Typeahead documentation。

Answer 1

我自己想出了一个解决办法。公平地说，这很容易。只需省略 script 标签并将模板的内容放在单独的 HTML 文件中。

<a>
    <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
    <span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span>
</a>

然后在typeahead-template-url属性中引用文件名：

<input type="text" ng-model="customSelected" placeholder="Custom template" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control" typeahead-show-hint="true" typeahead-min-length="0">

不需要任何额外的 ngInclude 或任何东西，AngularJS 会自动选择外部文件，只要您引用正确的路径。

谁能想到这简单！

如何将 ngTemplate 的代码移动到实际文件中？

How to move code of ngTemplate to an actual file?

angularjs

angular-ui-bootstrap

angular-ui-typeahead

angularjs-templates