如何等到数据在 AngularJS 中加载？答案

【问题标题】：How to wait until data is loaded in AngularJS?如何等到数据在 AngularJS 中加载？
【发布时间】：2016-03-05 00:21:17
【问题描述】：

在我的应用程序中，我有一些从服务中获取的数据，然后我继续在我的代码中使用这些数据来预加载表单。但是，有时在其余代码运行之后才加载数据，因此表单出现空白。其他时候，这很好，一切都加载了。我想让它始终加载填充了所有字段的表单。

问题是我有多个服务调用，那么如何确保所有服务都已完成加载？这是我的代码：

在参考数据服务中（其余的 GET 几乎使用相同类型的代码）：

        factory.getAllOffices= function(){
          var deferred = $q.defer();
          $http.get(APP_CONFIG.refURL+"/reference/getAllOffices")
            .success(function(response){
                deferred.resolve(response);
            })
            .error(function(msg, code, headers, config){
                console.log(msg);
                deferred.reject(msg);
            });
        return deferred.promise;
    };

在控制器中：

    referenceDataService.getAllOffices().then(function(data){
        $scope.allOffices= data;
    });

    referenceDataService.getAllTypes().then(function(data){
        $scope.allTypes= data;
    });

    referenceDataService.getAllTeams().then(function(data){
        $scope.teamOptions.data = data;
    });

    //Checking to see if form exists.
    $scope.formID= '';

    if(!angular.isUndefinedOrNull($routeParams.id)){
        $scope.formID= $routeParams.id.substring(1);
    }

    if (!($scope.formID== '')){
        addFormService.getForm($scope.formID).then(function(data) {

            var officeIndex=angular.findIndexOf($scope.allOffices, data.officeID);
            var typeIndex=angular.findIndexOf($scope.allTypes, data.typeID);

            $scope.form.name= data.name;
            $scope.report.office= $scope.allOffices[officeIndex];
            $scope.report.type= $scope.allTypes[typeIndex];
            $scope.teamOptions.data = data.teamList;
            $scope.report.teams= data.teams;

            angular.forEach($scope.report.teams, function(id) {
                $scope.teamOptions.grid.rows.map(function (row) {
                    if (row.entity.id == id) {
                        row.setSelected(true);
                    }
                });
            });
        });
    }

有时在 formID 代码运行之前不会返回办公室、类型和团队。

【问题讨论】：

“有时”你的意思是每次？
顺便说一句，您可以直接返回从$http 调用返回的promise，而不是使用$q.defer。

标签： javascript angularjs

【解决方案1】：

您可以使用q.all()，因为它接受一组承诺，只有在所有承诺都已解决后才会被解决。

$q.all([
      referenceDataService.getAllTypes(),
      referenceDataService.getAllTeams()
    ]).then(function(data){
      $scope.allTypes = data[0];
      $scope.teamOptions.data = data[1];
 });

您还可以使用ng-hide/ng-show 选择何时显示/隐藏某些元素。您可以使用$scope.showProperty = false; 初始化页面，一旦您的服务调用得到解决，请切换它：$scope.showProperty = true;。

【讨论】：