Angular 1.6 的芯片自动完成功能。无角材料

Question

我需要在我们的Angular 1.6 应用程序中添加一个自动完成芯片组件。我们正在使用Typescript、Webpack 2。由于我们已经在使用angular-ui-bootstrap，我们不想再引入 angular-material 以避免样式冲突。然而，所希望的结果正是材料芯片所提供的。

是否有我可以在我的情况下使用的指令或组件？我找到了this library，但是当我导入它时它会运行无穷无尽的异常。

不幸的是，我只能找到带有引导字体的部分解决方案，但是我需要实现所有“芯片”部分，这让我想到重新发明轮子。

Answer 1

在这里堆叠Newb。我有一个和你一样的问题。以下是我解决此问题的方法：

1.解析 angular-chips 库中的ReferenceError: error is not defined

您使用的库 (angular-chips) 在设计时并未考虑到打字稿。因此，您首先需要解决以下错误ReferenceError: error is not defined，方法是在上面的行中使用var error; 为它们定义它。这应该为您的 webpack 使用准备 angular-chips。

您会发现的第二个问题是如何将您的 typeahead-template-url 与 webpack 添加到混合中。与其引用单独的 html 文件，不如使用此处引用的内联模板：Bootstrap-UI Typeahead display more than one property in results list?。

如果你像我一样懒惰并且不想关注该超链接，请以此为例：

2。 <chips>标签前要添加的模板：

<script type="text/ng-template" id="yourTemplate.html">
    <a tabindex="-1">
      <i ng-class="'icon-'+match.model.type"></i>
      <span  ng-bind-html-unsafe="match.model.title | typeaheadHighlight:query"></span>
   </a>
</scrip>

3.在指令中包含模板：

typeahead-template-url:"yourTemplate.html"

对我来说就像一个魅力。