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

How to set pop up using Angular Js + bootsrap?

本文关键字:设置 窗口 bootstrap 何使用 Angular Js      更新时间:2023-09-26

我正在用angular js和bootstrap开发一个网站。

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

但是我被困在这里如何与我的设置。在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 =预览

你做对了。你需要在你的应用中包含angular-bootstrap $ ibmodal模块,然后你就可以准备

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

var instance = $modal.open();

保留实例,并在保存响应时适当地调用它。

instance.dismiss();

以上操作将关闭您的信息弹出窗口。

看看我为你创造的活塞。它在获取您的ip地址相当快,但它模仿您的解决方案。

添加

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

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

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

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

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