twitter-bootstrap - 带有 Bootstrap 3 的 Angular Dialog 指令

Question

我们正在尝试从 Bootstrap 2.3.2 迁移到 Bootstrap 3 (RC1)，并且遇到了AngularJS Dialog 指令的问题。单击相关按钮时，不会出现对话框弹出（页面显示为黑色。单击任意位置将返回原始的非黑色视图）。

我们基本上使用与上面链接中完全相同的代码。

这里讨论了一个已知问题。在那次讨论中，路德建议：

“要让模态工作，添加隐藏类以设置显示：无模式并将模态的显示重置为阻止”

不幸的是，这似乎没有任何区别。我们可以使用哪些替代方法来让对话框出现在 Bootstrap 3 RC1 中？

我尝试使用Modal 指令代替。它有一个类似的问题，页面消失（而不是完全变黑）并且弹出窗口也没有出现。

Answer 1

正如其他答案所述，这是由于 Bootstrap 3 中的重大更改。在 Angular UI 团队解决了这些问题之前（目前正在开发中，请参阅 bootstrap3_bis 分支），有一个 css 解决方法仅适用于此博客文章中详细介绍的对话框：

.modal { display: block; }

工作 plunkr 可在此处获得：

http://plnkr.co/edit/nZT58YNKT84UlSwTvfpc?p=preview

Answer 2

有一个待处理的拉取请求，其中包含对 Bootstrap 3.0 和 AngularUi 指令的大多数问题的修复，包括对话框问题（这对我来说肯定是最令人沮丧的问题！）：

https://github.com/angular-ui/bootstrap/pull/742

（参见与当前 AngularJS 引导指令兼容的 Bootstrap 3？）

Answer 3

您使用的示例代码适用于 Twitter Bootstrap 2.3.2。为什么您希望它也可以与 Twitter 的 Bootstrap 3 的第 3 版一起使用？Twitter 的 Bootstrap 3 不向后兼容 Twitter 的 Bootstrap 2.x。您将不得不更改/迁移您的 HTML。因为您使用的是 Angular JS，所以您必须迁移您的模板。目前大部分作品似乎已经准备就绪，请参阅：https ://github.com/angular-ui/bootstrap/pull/742 。http://www.bootply.com/bootstrap-3-migration-guide会给你一个你必须做出的改变的印象。