Question

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

我可以在我的案例中使用指令或组件吗？我找到了this library，但是当我导入它时会遇到无穷无尽的异常。

不幸的是，我只能找到带有bootstrap typehead的部分解决方案，但后来我需要实现所有＆＃34;芯片＆＃34;部分，让我想到重新发明轮子。

Answer 1

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

<强> 1。解析angular-chips库中的ReferenceError: error is not defined

您使用的库（角度芯片）并未考虑打字稿。因此，您首先需要通过ReferenceError: error is not defined在上面的行中为它们定义错误来解决以下错误var error;。这应该为你的webpack使用准备角度筹码。

您将找到的第二个问题是如何在混合中添加您的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"

对我来说就像一个魅力。

Angular 1.6的芯片自动完成功能。没有角度材料

1 个答案: