完成所有 API 后如何设置作用域变量标志的值？

Question

我的仪表板上有 5 个小部件，我正在单独调用以获取每个小部件的数据。

我的结构如下：

<div>
   <div id="widget1">
      --Widget 1 data
   </div>     
   <div id="widget2">
      --Widget 2 data
   </div>     
   <div id="widget3">
      --Widget 3 data
   </div>
   <div id="widget4">
      --Widget 4 data
   </div>
   <div id="widget5">
      --Widget 5 data
   </div>
</div>

在角度方面，我为每个基于 API 开始和结束更新的小部件都有范围变量：

$scope.dataLoadedForWidget1 = true; 
$scope.dataLoadedForWidget2 = true; 
$scope.dataLoadedForWidget3 = true; 
$scope.dataLoadedForWidget4 = true; 
$scope.dataLoadedForWidget5 = true; 

$scope.showEntireDiv = true; 

我有一个指令可以处理 True/False 值以使整个 div 变灰。

<div isloaded="showEntireDiv">

但我的问题是，因为我有单独的 API，我在哪里设置 $scope.showEntireDiv 的值？

如何确保在 API 调用完成后才设置$scope.showEntireDiv 的值？

更新：

$scope.getEmployees = function () { //callback function 1
                myService.getEmployeeData().success(function (data) {
                $scope.employees= data.response;
                }).finally(function () {
                });
            };

Answer 1

您可以将所有请求映射到一个promise数组中，并在所有promise解析后使用$q.all()显示内容。

使用ng-show和ng-repeat的简化版：

angular.module('myApp',[])
.controller('myCtrl',['$http','$q', function($http, $q){
  const getUser = (id) =>{
     return $http.get(`https://jsonplaceholder.typicode.com/users/${id}`).then(res=>res.data)
  }
  // create array of request promises
  const reqPromises = [1,3,5].map(getUser)
  
  $q.all(reqPromises).then(users=>{     
    this.users = users;
    // allow users to show after all requests resolve
    this.allLoaded = true;    
  });
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as $ctrl">
  <h3 ng-hide="$ctrl.allLoaded">Loading...</h3>
  <div ng-show="$ctrl.allLoaded">
      <h3>Users List</h3>
     <div ng-repeat="user in $ctrl.users">Name: {{user.name}}, ID: {{user.id}}</div>
  </div>
</div>