javascript - 如何等到数据加载到 AngularJS 中？

Question

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

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

在引用数据服务中(其余的 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;
    };

在 Controller 中:

    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 代码之前不会返回 Offices、Types 和 Teams。

Answer 1

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

$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;。