如何等待數據在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中加載？

回答

相關問題