Angular-ui select2 在将 Angular 与 twitter-bootstrap 混合时不起作用

Posted 2023-05-07

【中文标题】Angular-ui select2 在将 Angular 与 twitter-bootstrap 混合时不起作用

【英文标题】：Angular-ui select2 not working when mixing angular with twitter-bootstrap

【发布时间】：2012-12-28 04:15:59

【问题描述】：

我在同一个 Web 应用程序中使用 angular-ui 和 bootstrap，但在尝试使用 ui-select2 组件时遇到了问题：一切正常，除了在下拉列表中选择一个元素时它不是在组件中显示，它显示为空，尽管 ng-model 关联变量已正确更新。 如果我从主页中删除 bootstrap.js 文件的包含，这种奇怪的行为就会消失。 有没有人同时使用 angular-js 和 bootstrap 的经验和/或知道任何调整以申请让它们一起工作？

更新：

ui-select2 组件位于 input-append div 中，只需删除 div 即可解决问题。我创建了 Angular-ui ui-select2 原始沙盒演示 here 的一个分支。您可以转到“版本 2”示例并检查在列表中选择一个值是否正确更新了模型，但没有更新输入元素。

【问题讨论】：

我刚刚发现问题是由于 select2 组件位于 input-append div 内，只需删除 div 即可解决问题。无论如何问题仍然有效，我只是缩小了范围，似乎是一些 css 冲突。

你能创建一个小提琴之类的东西来演示代码和行为吗？

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

【参考方案1】：

底线是你不能在本地使用 input-append 和 Select2。您放入 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 指令。

【讨论】：

非常感谢您的帮助，我将采用 Plunker 中显示的解决方案。顺便说一句，我看到你是“AngularJS Tips and Tricks”的作者，干得好！