当使用twitter-bootstrap混合角时，Angular-ui select2不工作

我在同一个web应用程序中使用angular-ui和bootstrap，并且在尝试使用ui-select2组件时遇到了问题：在下拉列表中选择一个元素时，它不会显示在组件中，但它显示为空，但ng模型关联变量正确更新。如果我从主页面中删除了bootstrap.js文件，这种奇怪的行为就会消失。有没有人曾经同时使用angular-js和bootstrap和/或谁知道任何调整申请让他们一起工作？当使用twitter-bootstrap混合角时，Angular-ui select2不工作

UPDATE：

与UI SELECT2组分是输入追加DIV中，只删除在div解决问题。我创建了Angular-ui ui-select2原始沙盒演示here的一个分支。您可以转到“版本2”示例，并检查在列表中选择一个值是否正确更新模型，但不会更新输入元素。

来源

2013-01-14 remigio

我刚刚发现问题是由select2组件在input-append div中引起的，只是删除div解决了问题。无论如何，这个问题仍然有效，我只是缩小了方式，似乎是一些CSS冲突。 – remigio

你可以创建一个小提琴或其他东西来演示代码和行为吗？ – ProLoser

@ProLoser感谢您的关注，我已通过链接指向示例更新了我的问题。 – remigio

底线是你不能在本地使用Select2和input-append。您放入HTML的输入实际上将隐藏起来，而Select2会注入额外的DOM元素（div，列表和输入），这些元素将全部隐藏/显示，并且都具有各自的CSS。

您遇到的问题是由于Bootstrap和Select2之间的CSS冲突造成的。

您应该考虑A：不使用input-append，B：重写或调整CSS以取消隐藏相关元素，C：使用typeahead或其他一些与Bootstrap CSS完美搭配的解决方案。

您可以检出AngularUI Bootstrap Project或检出this Plunker/Gist，它显示了如何使用AngularUI Passthrough指令运行Bootstrap指令。

来源

2013-01-16 00:08:33 ProLoser

非常感谢您的帮助，我将使用您的Plunker中显示的解决方案。顺便说一下，我已经看到你是“AngularJS技巧和窍门”的作者，非常出色！ – remigio

当使用twitter-bootstrap混合角时，Angular-ui select2不工作

回答

相关问题