问题描述
限时送ChatGPT账号..使用 此处 中提到的示例,我如何使用 JavaScript 调用模态窗口点击按钮?
Using the example mentioned here, how can I invoke the modal window using JavaScript instead of clicking a button?
我是 AngularJS 的新手,并尝试搜索文档这里 和 这里没有运气.
I am new to AngularJS and tried searching the documentation here and here without luck.
谢谢
推荐答案
好的,那么首先http://angular-ui.github.io/bootstrap/ 有一个 <modal>
指令和 $dialog
服务,这两个服务都可以用来打开模态窗口.
OK, so first of all the http://angular-ui.github.io/bootstrap/ has a <modal>
directive and the $dialog
service and both of those can be used to open modal windows.
不同之处在于,使用
指令时,模态的内容被嵌入到托管模板(触发模态窗口打开的模板)中.$dialog
服务更加灵活,允许您从单独的文件加载模态的内容以及从 AngularJS 代码中的任何位置触发模态窗口(这是控制器、服务或其他指令).
The difference is that with the <modal>
directive content of a modal is embedded in a hosting template (one that triggers modal window opening). The $dialog
service is far more flexible and allow you to load modal's content from a separate file as well as trigger modal windows from any place in AngularJS code (this being a controller, a service or another directive).
不确定使用 JavaScript 代码"的确切含义,但假设您指的是 AngularJS 代码中的任何地方,$dialog
服务可能是一种可行的方法.
Not sure what you mean exactly by "using JavaScript code" but assuming that you mean any place in AngularJS code the $dialog
service is probably a way to go.
它非常易于使用,您只需编写最简单的形式即可:
It is very easy to use and in its simplest form you could just write:
$dialog.dialog({}).open('modalContent.html');
为了说明它可以真正被任何 JavaScript 代码触发,这里有一个版本,它在控制器实例化 3 秒后用计时器触发模态:
To illustrate that it can be really triggered by any JavaScript code here is a version that triggers modal with a timer, 3 seconds after a controller was instantiated:
function DialogDemoCtrl($scope, $timeout, $dialog){
$timeout(function(){
$dialog.dialog({}).open('modalContent.html');
}, 3000);
}
这可以在这个 plunk 中看到:http://plnkr.co/edit/u9HHaRlHnko492WDtmRU?p=preview
This can be seen in action in this plunk: http://plnkr.co/edit/u9HHaRlHnko492WDtmRU?p=preview
最后,这里是此处描述的 $dialog
服务的完整参考文档:https://github/angular-ui/bootstrap/blob/master/src/dialog/README.md
Finally, here is the full reference documentation to the $dialog
service described here:
https://github/angular-ui/bootstrap/blob/master/src/dialog/README.md
这篇关于使用 JavaScript 在 AngularJS Bootstrap UI 中调用模态窗口的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论