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

时间:2017-04-04 14:49:31

标签: angularjs autocomplete angular-ui-bootstrap webpack-2

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

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

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

1 个答案:

答案 0 :(得分:0)

在这里堆叠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"

对我来说就像一个魅力。