我如何等待Angular JS直到我的web服务返回

我有两个对我的web服务的调用，他们都会在同一页面中填充两个不同的网格部分。我如何等待Angular JS直到我的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>

来源

2016-04-29 StrugglingCoder

使用延迟从底层Q –

你没有提供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/看到它在行动。

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

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

来源

2016-04-29 17:13:38 kfreezen

其实我不能这样做，我猜。对'TransactionApiServices.getApiUnmergeRequestDetails（params）'的调用调用另一个服务，然后调用Web服务，例如'var getApiUnmergeRequestData = function（param）{console.log（“Type before sending”）; var url = BasePath +'TransactionNative/gettransunmergerequest /'+ param [“trans_key”];'...... so超时一个选项？ – StrugglingCoder

我使用$ timeout作为该函数的替代品，因为我没有访问您的代码。我更新了我的代码，希望它更清楚一点。 – kfreezen

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

all（promises）;

将多个承诺组合成单个承诺，当所有输入承诺解决时解决。

编辑：为例

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

来源

2016-04-29 17:00:26

您可以给我一个例子使用我给的数据吗？ – StrugglingCoder

可以使用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>

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

来源

2016-04-29 17:12:21 aseferov

我们在哪里设置隐藏或显示？请参阅我在问题中发布的html。 – StrugglingCoder

这实际上很可爱，但是在等待结果的时候并没有显示“请等待div”。请参阅最新的问题。 – StrugglingCoder

是否'请等待div'显示，即使没有'ng-hide ='grid1 && grid2''？我的意思是默认它必须是可见的，检查你的css – aseferov

甜，易于理解，您可以使用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>

来源

2016-04-29 17:17:22 sunixi

我如何等待Angular JS直到我的web服务返回

回答

相关问题