使用 JavaScript 在 AngularJS Bootstrap UI 中调用模式窗口 [英] Invoking modal window in AngularJS Bootstrap UI using JavaScript

问题描述

使用 here 中提到的示例，如何使用 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.

不同之处在于，使用 <modal> 指令，模态的内容被嵌入到宿主模板(触发模态窗口打开的模板)中.$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.com/angular-ui/bootstrap/blob/master/src/dialog/README.md

Finally, here is the full reference documentation to the $dialog service described here: https://github.com/angular-ui/bootstrap/blob/master/src/dialog/README.md

这篇关于使用 JavaScript 在 AngularJS Bootstrap UI 中调用模式窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！