我需要在Angular 1.6
应用程序中添加自动完成芯片组件。我们正在使用Typescript
,Webpack 2
。由于我们已经在使用angular-ui-bootstrap
,因此我们不想引入angular-material以避免样式冲突。然而,希望的结果正是材料芯片所提供的。
我可以在我的案例中使用指令或组件吗?我找到了this library,但是当我导入它时会遇到无穷无尽的异常。
不幸的是,我只能找到带有bootstrap typehead的部分解决方案,但后来我需要实现所有"芯片"部分,让我想到重新发明轮子。
答案 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"
对我来说就像一个魅力。