angularjs - 自定义 ngTagsInput 自动完成

Question

任何人都知道如何自定义 ngTagsInput 自动完成的布局？

<tags-input ng-model="tags" placeholder="neues Tag">
    <-- Customize this autocomplete layout  --->
    <auto-complete source="loadTags($query)"></auto-complete>
</tags-input>

我想在自动完成结果中嵌入类似这个模板的东西

<div> {{ Category }} : {{ TagName }} </div>

Answer 1

现在有对自定义自动完成模板的内置支持。

您可以通过设置模板选项来更改默认的自动完成模板：

<auto-complete source="loadTags($query)" template="/path/custom-template"></auto-complete>

或者

<auto-complete source="loadTags($query)" template="my-custom-template"></auto-complete>

如果使用内联模板，您可以这样指定：

<script type="text/ng-template" id="my-custom-template">
    ...
</script>

官方文档在这里。 http://mbenford.github.io/ngTagsInput/documentation/guides/custom-templates

Answer 2

目前没有对此的内置支持，但您始终可以获取源代码并根据您的需要对其进行自定义。

但是，该功能存在一个未解决的问题。您可以在此处跟踪其进度。

现在支持自定义模板。Irfad Ibrahim 的回答提供了更多信息。

Answer 3

你有三个选择：

1. 通过将文件物理地放在文件夹中来覆盖 $templateCache，对于这个库来说，文件夹是：

   $templateCache.put('ngTagsInput/tags-input.html', ' ... '
   $templateCache.put('ngTagsInput/auto-complete.html', ' ... '
   

2. 在您的 html 上使用模板脚本：

   <script id="ngTagsInput/tags-input.html" type="text/ng-template">
     <div>Whatever here</div>
   </script>
   

3. 注入$templateCache服务并覆盖模块上的模板

   angular.module('myApp',[])
     .run(['$templateCache', function($templateCache){
       $templateCache.put('ngTagsInput/tags-input.html',
          <div>Whatever here</div>
       );
     }]);