[英]Angular-ui select2 not working when mixing angular with twitter-bootstrap
I'm using angular-ui and bootstrap in the same web application and I've an issue when trying to use the ui-select2 component: everything works fine except that upon selecting an element in the drop-down list it's not shown in the component, it shows empty, though the ng-model associated variable is correctly updated. 我在同一个Web应用程序中使用angular-ui和bootstrap,在尝试使用ui-select2组件时我遇到了一个问题:一切正常,除了在下拉列表中选择一个元素时它没有显示在虽然ng-model关联变量已正确更新,但它显示为空。 This strange behavior goes away if I remove the inclusion of the bootstrap.js file from the main page. 如果我从主页中删除了包含bootstrap.js文件,这种奇怪的行为就会消失。 Is there anyone who has experienced using both angular-js and bootstrap at the same time and/or who knows about any tweaks to apply for having them work together? 是否有人同时使用angular-js和bootstrap和/或谁知道任何调整申请让他们一起工作?
UPDATE: 更新:
The ui-select2 component is inside an input-append div, just removing the div solves the problem. ui-select2组件位于input-append div中,只需删除div即可解决问题。 I've created a fork of the Angular-ui ui-select2 original sandbox demo here . 我创建了角的UI用户界面,选择2原沙箱演示的一个分支在这里 。 You can go to the "Version 2" example and check that selecting a value in the list correctly update the model but doesn't updates the input element. 您可以转到“版本2”示例,并检查在列表中选择值是否正确更新模型但不更新输入元素。
The bottom line is that you cannot use input-append
alongside Select2 natively. 底线是,你不能使用input-append
一起选择二本机。 The input that you put into the HTML is actually going to be hidden, and Select2 injects additional DOM elements (divs, lists and inputs) that all will be hidden/shown and all have their own respective CSS. 您放入HTML的输入实际上将被隐藏,而Select2会注入所有将被隐藏/显示的所有DOM元素(div,列表和输入),并且都具有各自的CSS。
The problem you are having is due to conflicting CSS between Bootstrap and Select2. 您遇到的问题是由于Bootstrap和Select2之间的CSS冲突造成的。
You should consider A: Not using input-append, B: Rewriting or tweaking the CSS to un-hide the relevant elements, C: Use typeahead or some other solution that plays nicely with Bootstrap's CSS instead. 您应该考虑A:不使用input-append,B:重写或调整CSS以取消隐藏相关元素,C:使用typeahead或其他一些与Bootstrap CSS完美匹配的解决方案。
You can checkout the AngularUI Bootstrap Project or check out this Plunker / Gist that shows you how to run Bootstrap directives using the AngularUI Passthrough directive. 您可以签出AngularUI Bootstrap项目或查看此Plunker / Gist ,它向您展示如何使用AngularUI Passthrough指令运行Bootstrap指令。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.