Question

我有两次调用我的网络服务，他们将在同一页面中填充两个不同的网格部分。

我不希望在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>

Answer 1

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

所有（许诺）;

将多个promises组合成一个promise，当所有输入promise都被解析时解析。

编辑：示例

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();
})

Answer 2

你可以使用ng-hide和ng-show来实现这个

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);
    });

Answer 3

你没有提供与你的JS一起使用的HTML，所以我会为你做些什么。

我使用$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/看到它的实际效果。

它没有那么多的造型，但我认为一般的想法是你想要的。

编辑：更改了代码以更清楚地与您的问题联系起来。希望这会有所帮助。

Answer 4

甜美易懂您可以使用ng-hide或ng-show

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>

我怎么能等待Angular JS直到我的Web服务返回

4 个答案: