如何等待数据在AngularJS中加载？

在我的应用程序中，我有一些数据可以从服务中获取，然后在我的代码中用于预加载表单。但是，有时直到代码运行后才会加载数据，因此表单空白。其他时候，这很好，一切都会加载。我想使它始终加载填充所有字段的表单。如何等待数据在AngularJS中加载？

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

在参考数据服务（的其余部分得到相当多的使用同一种的代码）：

 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代码运行之前不会返回。

来源

2015-11-02 user202925

*“有时”*你的意思是每次？ –

顺便说一句，不要使用'$ q.defer'，而只需返回从'$ http'调用返回的promise。 –

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

来源

2015-11-02 20:46:19

如何等待数据在AngularJS中加载？

回答

相关问题