带有 Bootstrap 3 的 Angular Dialog 指令答案

【问题标题】：Angular Dialog directives with Bootstrap 3带有 Bootstrap 3 的 Angular Dialog 指令
【发布时间】：2013-08-11 14:50:16
【问题描述】：

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

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

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

“要让模态正常工作，添加隐藏类以将 display:none 设置为模态并将模态的显示重置为阻止”

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

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

【问题讨论】：

您能否针对您的问题提出jsfiddle.com 或plnkr.co？
Bootstrap 3 with AngularJS 可能重复，stackoverflow.com/questions/18205329/… 可能重复
@KEB 如果您发现其中任何一个有用，为什么不标记答案？干杯

标签： twitter-bootstrap angularjs angularjs-directive twitter-bootstrap-3

【解决方案1】：

您使用的示例代码适用于 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 会给你一个印象，你将不得不做出改变。

【讨论】：

【解决方案2】：

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

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

（见Bootstrap 3 compatible with current AngularJS bootstrap directives?）

【讨论】：

【解决方案3】：

正如其他答案所述，这是由于 Bootstrap 3 中的重大更改造成的。在 Angular UI 团队修复这些问题之前（目前正在开发中，请参阅 bootstrap3_bis 分支），有一个 css 解决方法仅适用于详细的对话框this blog post:

.modal { display: block; }

工作 plunkr 在这里可用：

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

【讨论】：

谢谢，我添加了 .modal { display: block;高度：0；溢出：可见；这至少有助于解决一个问题:)
谢谢。链接的 plunkr 示例不适用于 0.6 版（它适用于 0.5 版）。我收到“未知提供程序：$dialogProvider
@AlanKlement $dialog 已不复存在，现在使用 Modal，通过包含 'ui.bootstrap.modal' 来使用它并使用 $modal 服务。角度引导项目页面更新了如何使用它。 API 也有变化，所以不要只是查找/替换 :)
@Mutahhir 谢谢。你有链接吗？我现在正在寻找，但只是想确保我正在寻找正确的东西。
@Mutahhir 实际上，我找不到您所说的任何内容。我能找到的只是关于如何重写 $modal 的讨论。也许它在某个分支的某个地方......我想不通。