使用JavaScript在AngularJS Bootstrap UI中调用模式窗口
回答 4
Stack Overflow用户
发布于 2013-04-29 02:20:48
好的，首先http://angular-ui.github.io/bootstrap/有一个<modal>指令和$dialog服务，这两个都可以用来打开模态窗口。
不同之处在于，使用<modal>指令，模态的内容被嵌入到宿主模板(触发模态窗口打开的模板)中。$dialog服务要灵活得多，它允许您从单独的文件加载模态的内容，以及从AngularJS代码中的任何位置(这是控制器、服务或另一个指令)触发模态窗口。
我不确定您所说的“使用JavaScript代码”到底是什么意思，但是假设您指的是AngularJS代码中的任何地方，那么$dialog服务可能是一种可行的方法。
它非常容易使用，在它最简单的形式中，你可以这样写：
$dialog.dialog({}).open('modalContent.html'); 为了说明它真的可以由任何JavaScript代码触发，这里是一个用计时器触发模式的版本，在控制器实例化3秒后：
function DialogDemoCtrl($scope, $timeout, $dialog){
$timeout(function(){
$dialog.dialog({}).open('modalContent.html');
}, 3000);
}这可以在下面的插图中看到：http://plnkr.co/edit/u9HHaRlHnko492WDtmRU?p=preview
最后，这里是这里描述的$dialog服务的完整参考文档：https://github.com/angular-ui/bootstrap/blob/master/src/dialog/README.md
Stack Overflow用户
发布于 2013-09-11 19:04:43
要使angular ui $modal与bootstrap 3一起工作，您需要覆盖样式
.modal {
display: block;
}
.modal-body:before,
.modal-body:after {
display: table;
content: " ";
}
.modal-header:before,
.modal-header:after {
display: table;
content: " ";
}(如果使用自定义指令，则最后几个是必需的)，并用
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->Stack Overflow用户
发布于 2013-08-28 03:13:27
AngularJS引导程序网站尚未使用最新文档进行更新。大约3个月前，pkozlowski-opensource编写了一个更改，将$modal与$dialog提交分开，如下所示：
https://github.com/angular-ui/bootstrap/commit/d7a48523e437b0a94615350a59be1588dbdd86bd
在提交中，他为$modal添加了新文档，这些文档可以在下面找到：
希望这能有所帮助！
https://stackoverflow.com/questions/16265844
复制相似问题