一尘不染

使用JavaScript在AngularJS Bootstrap UI中调用模式窗口

angularjs

使用此处提到的示例,如何使用JavaScript而不是单击按钮来调用模式窗口?

我是AngularJS的新手,并尝试在这里这里搜索文档,但是没有运气。

谢谢


阅读 215

收藏
2020-07-04

共1个答案

一尘不染

好的,因此,首先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

2020-07-04