我怎么能在Angular JS中等待，直到我的web服务返回

How can I wait in Angular JS till when my web service returns

本文关键字：我的 web 返回 服务 等待 怎么能 Angular JS      更新时间：2023-09-26

我有两个对web服务的调用，它们都将填充同一页面中网格的两个不同部分。

在两个web服务调用都返回之前，我不想显示页面。

以下是它的样子：

在ABCCtrl.js中…………

if (params) {
    //I set the please wait dialog on
    $scope.pleaseWait = { "display": "block" };

    //I hit the first service call and it will populate myFirstUIGrid
    TransactionApiServices.getApiUnmergeProcessDetails(params).then(function (results) {
        $scope.gridOptions_PR.data = "";
        $scope.gridOptions_PR.data.length = 0;
        $scope.gridOptions_PR.data = results.data;
        console.log(results);
    });
    //I hit the second service call and it will populate mySecondUIGrid
    TransactionApiServices.getApiUnmergeRequestDetails(params).then(function (results) {
        $scope.gridOptions_RQ.data = "";
        $scope.gridOptions_RQ.data.length = 0;
        $scope.gridOptions_RQ.data = results.data;
        console.log(results);
    });

在两个网格填充之后，我只想set the please wait off并显示网格。

    $scope.toggleDetails = { "display": "block" };
    $scope.toggleHeader = { "display": "block" };
    $scope.pleaseWait = { "display": "none" };

这是一个包含两个ui网格的页面：

<div class="home-grid-content" ng-controller="TransactionDetailsUnmergeController">
    <div ng-style="pleaseWait">
        <div class="refresh" style="width:100%;height:100px;">
            <h4>Please wait....</h4>
        </div>
    </div>
    <div ng-style="toggleDetails">
        <h3>Unmerge Request Log</h3>
        <div ui-grid="gridOptions_RQ" ui-grid-selection class="" ui-grid-pagination ui-grid-auto-resize>
            <div class="watermark" ng-show="!gridOptions.data.length">No data available</div>
        </div>
        <div class="grid-pager">
            <uib-pagination boundary-links="true" total-items="totalItems" items-per-page="4" ng-change="pageChanged(currentPage)" ng-show="(totalItems>4) == true"
                            ng-model="currentPage" class="pagination" direction-links="false" id="HconstUnmerge_1"
                            first-text="&laquo;" last-text="&raquo;">
            </uib-pagination>
        </div>
        <br/>
        <h3>Unmerge Process Log</h3>
        <div ui-grid="gridOptions_PR" ui-grid-selection class="" ui-grid-pagination ui-grid-auto-resize>
            <div class="watermark" ng-show="!gridOptions.data.length">No data available</div>
        </div>
        <div class="grid-pager">
            <uib-pagination boundary-links="true" total-items="totalItems" items-per-page="4" ng-change="pageChanged(currentPage)" ng-show="(totalItems>4) == true"
                            ng-model="currentPage" class="pagination" direction-links="false" id="HconstUnmerge_1"
                            first-text="&laquo;" last-text="&raquo;">
            </uib-pagination>
        </div>
        <div style="margin-top:8px;">
            <button type="button" class="btn btn-default pull-left" ng-click="backToDetailsPage()">Cancel</button>
        </div>
    </div>
</div>

您没有提供HTML来配合JS，所以我会为您做一些弥补。

我用$timeout代替了TransactionApiServices.getApiUnmergeRequestDetails，但如果你使用我在这个jsfiddle中使用的相同想法，它应该会起作用。

HTML:

<body ng-app="MyApp" ng-controller="MyController">
    <div id="loading-overlay" ng-class="{ 'display': loading }">
        <div id="popup">
            Please Wait... <!-- any other styling you want goes on this popup. -->
        </div>
    </div>
    <div>
        {{data}}
    </div>
</body>

JS:

angular.module("MyApp", []);
angular.module("MyApp").controller("MyController", function ($scope, $timeout, $q) {
    $scope.data = "";
    var firstPromise = TransactionApiServices.getApiUnmergeProcessDetails(params).then(function() {
        $scope.gridOptions_PR.data = "";
        $scope.gridOptions_PR.data.length = 0;
        $scope.gridOptions_PR.data = results.data;
        console.log(results);
    });
    var secondPromise = TransactionApiServices.getApiUnmergeRequestDetails(params).then(function() {
        $scope.gridOptions_RQ.data = "";
        $scope.gridOptions_RQ.data.length = 0;
        $scope.gridOptions_RQ.data = results.data;
        console.log(results);
    });
    $scope.loading = true;
    $q.all([firstPromise, secondPromise]).then(function () {
        $scope.loading = false;
    });
});

CSS：

#loading-overlay {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
  background-color: #000000;
  opacity: 0.5;
}
#loading-overlay.display {
  display: block !important;
}
#popup {
  margin: 0 auto;
  width:75%;
  margin-top: 100px;
  color: rgba(255, 255, 255, 1);
}

https://jsfiddle.net/kszat61j/看看它在行动。

它没有太多的造型，但我认为总的想法是你想要的。

编辑：更改了代码，使其与您的问题更加清晰。希望这能有所帮助。

您可以使用ng隐藏和ng显示用于此

html:

<div ng-show='grid1 && grid2 '>grid1</div>
<div ng-show='grid1 && grid2 '>grid2</div>
<div ng-hide='grid1 && grid2 '>please wait</div>

js

if (params) {
    //I set the please wait dialog on
    $scope.pleaseWait = { "display": "block" };

    //I hit the first service call and it will populate myFirstUIGrid
    TransactionApiServices.getApiUnmergeProcessDetails(params).then(function (results) {
        $scope.grid1 = true
        $scope.gridOptions_PR.data = "";
        $scope.gridOptions_PR.data.length = 0;
        $scope.gridOptions_PR.data = results.data;
        console.log(results);
    });
    //I hit the second service call and it will populate mySecondUIGrid
    TransactionApiServices.getApiUnmergeRequestDetails(params).then(function (results) {

        $scope.grid2 = true
        $scope.gridOptions_RQ.data = "";
        $scope.gridOptions_RQ.data.length = 0;
        $scope.gridOptions_RQ.data = results.data;
        console.log(results);
    });

您可以使用$q.all([ array of promises ]).then(...)。检查文档

所有（承诺）；

将多个承诺组合为一个承诺，当所有输入承诺都得到解决时，该承诺就会得到解决。

编辑：示例

var promises = [$timeout(angular.noop, 500), $timeout(angular.noop, 5000)];
$q.all(promises).then(function(results){
 //This will be executed when both promises fulfill - after 5000ms
 var promise1_result = results[0];
 var promise2_result = results[1];
 doStuff();
})

甜美易懂您可以使用ng隐藏或ng显示

myApp.controller('CheckServiceCtrl',function($scope){
   $scope.service1=false;
   $scope.service2=false;
   //after returning data from service1 set 
     $scope.service1=true;
    //after return data from service2 set 
     $scope.service2=true;
}

假设您在2个不同的div中显示数据，并且根据您的需求，只有在完成这两个服务之后才能显示数据，那么您应该声明类似div。

<div  ng-controller="CheckServiceCtrl" >
    <div id="serivces" ng-show="service1 && service2">
       <div id="service1" >
         Display of service1
       </div>
       <div id="service2">
         Display of service2
       </div>
     </div>
    <div id=pleasewait" ng-hide="service1 && service2">
      Please Wait....
    </div>
 </div>
相关文章：