我如何在 Angular JS 中等待我的网络服务 returns

Question

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

而且我不想在两个网络服务调用 return 之前显示该页面。

这是它的样子：

在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

all(promises);

Combines multiple promises into a single promise that is resolved when all of the input promises are resolved.

编辑：一个例子

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

您没有提供 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/ 观看实际效果。

它的样式没有太多用处，但我认为总体思路就是您想要的。

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

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 like.

<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 中等待我的网络服务 returns

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

javascript

angularjs

angular-ui-grid