如何使用Angular Js + bootsrap设置弹出窗口?

时间:2016-08-22 09:28:14

标签: javascript jquery angularjs

我正在开发角js和靴子的网站。

当网站加载时,我正在进行一些服务器调用以获取一些数据。这个过程需要一些时间。在这个时间间隔内,我想显示一个等待消息的弹出窗口。

但我被困在这里如何使用我的设置。 在app.js中,在run方法中,我希望在执行完成后添加弹出调用以显示和隐藏。

.run(["$log", "$rootScope", "$state", "dtoResource", "questionResource", function ($log, $rootScope, $state, dtoResource, questionResource) {
                    dtoResource.rc1Step1DTO()
                            .then(function (data) {
                                $rootScope.AutoQuote = data;
                                questionResource.getQuestions($rootScope.AutoQuote.postAutoQuoteObj.SessionInfo.StateCode)
                                        .then(function (questions) {
                                           $rootScope.questions = questions;
                                            $rootScope.answers = {PC: 12345};
                                              console.log('Copy operation');
                                 angular.copy($rootScope.answers,$rootScope.default);
                                 console.log($rootScope.answers);
                                 console.log($rootScope.default);
                                           })
                            })
                            .then(function () {
                                //console.log('This should be printed after the above methods are done     executing');
                               // console.log($rootScope);

                            })

                }])
Below is plunker link

https://plnkr.co/edit/aV65Nab9U9I6YlK2g4sY?p=preview

2 个答案:

答案 0 :(得分:1)

你走在正确的轨道上。您需要在应用程序中包含angular-bootstrap $ uibmodal模块,然后您就可以

在save方法的调用上打开一个模态。下面的方法完成了这项工作。

var instance = $modal.open();

按住实例并根据保存的响应适当调用它。

instance.dismiss();

以上内容将关闭您的信息弹出窗口。

查看我为您创建的plunker。获取ip地址非常快,但它模仿了你的解决方案。

答案 1 :(得分:-1)

添加

<div id="loading" class="hidden"><p>loading</p></div>

在HTML代码中。

在使服务器添加以下内容之前:

$("#loading").removeClass("hidden");

并在收到服务器添加的响应后:

$("#loading").addClass("hidden");