AngularJS：從其余服務獲取數據時出現延遲，導致在使用數據時在html中出現問題

Question

我正在使用Mongo作為數據庫和Java開發角度應用程序。

當我單擊獲取數據按鈕時，我試圖從mongo DB中獲取數據，請參閱js bin http://jsbin.com/aRuWInU/2/edit中的代碼，對於我的html頁面，請參見代碼下方：

<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src="/angular.js"></script>
<script src="myscript.js"></script>
<meta charset=utf-8 />
<title>Demo</title>

  </head>

<body ng-controller="MyApp">
    <!--It will fetch data from Mongo Using REST service through 
    the angular factory ConsumptionEngineRESTService-->
    <button type="button" ng-click="getAllData()">Get Data</button>
    <h1>My Demo With filter</h1>
    <div ng-repeat="Maindata in myFilteredKey" class="">
        <h2>{{Maindata}}</h2>
        <div ng-repeat="item in data | filter:{'key':Maindata}">
            <p>My key is {{item.key}}</p>
            <p>My val is {{item.value}}</p>
        </div>

    </div>

</body>
</html>

當我從REST服務獲取數據時發生問題，獲取數據的延遲導致了我的問題，例如未填充$ scope.data，但是在下面的for循環中使用了該數據來填充$ scope.myFilteredKey數組，因此我的$ scope .myFilteredKey數組為空。 查看myscript.js的代碼

myscript.js
    var app = angular.module('myapp', []);

app.controller('MyApp', ['$scope', function($scope,ConsumptionEngineRESTService) {
        $scope.getAllData=function(){
            console.log("hi");
            /*STUB Data: when it is used , code is working perfectly*/
              /* $scope.data = [
                {key:"home",value:"hk1"},
                {key:"home",value:"hk2"},
                {key:"home",value:"hk3"},
                {key:"home",value:"hk4"},
                {key:"product",value:"pk1"},
                {key:"product",value:"pk2"},
                {key:"product",value:"pk3"},
                {key:"product",value:"pk4"},
                {key:"service",value:"sk1"},
                {key:"service",value:"sk2"},
                {key:"service",value:"sk3"},
                {key:"service",value:"sk4"}
            ]; */
            /* Data From REST Service: Issue happens when i fetch data from REST service,
            *Delay in fetching data cause me the issue, such as $scope.data is not populated but
            *that is used in the below for loop to populate the $scope.myFilteredKey array*/
            /*ConsumptionEngineRESTService is a angular factory. uses REST service to fetch from Mongo*/
            $scope.data =ConsumptionEngineRESTService.getAll();
            $scope.myFilteredKey=[];
            for(i=0;i<$scope.data.length;i++){
                if($scope.myFilteredKey.indexOf($scope.data[i].key)==-1){
                    $scope.myFilteredKey.push($scope.data[i].key);
                    console.log($scope.data[i].key);
                }
            }
        }
}]);

請幫助我解決問題，我想在for循環執行時填充$ scope.data，因為for循環正在使用$ scope.data進行填充。 注意：關於這個問題，我沒有包括REST服務角度工廠ConsumptionEngineRESTService 。

app.factory("ConsumptionEngineRESTService ", function($resource, $http) {
  var resource = $resource("/rest/:ID ", { ID : "@_ID " },
    {
      'create':  { method: 'POST' },
      'getAll':   { method: 'GET', isArray: true },
      'get':    { method: 'GET', isArray: false },
      'update':  { method: 'PUT' },
      'destroy': { method: 'DELETE' }
    }
  );
  return resource;
});

請為此提供幫助。謝謝您提前提供任何幫助。

Answer 1

我假設使用ConsumptionEngineRESTService.getAll(); 在內部使用角度資源？

如果是這種情況（以及使用的是$http的$http服務），則必須在成功回調中處理數據。 資源和http方法的結果僅僅是保證，代理對象最終將包含數據，但不是立即。 您的代碼應該看起來像這樣：

$scope.data = ConsumptionEngineRESTService.getAll(function() {
    $scope.myFilteredKey=[];
    // note that you can work with $scope.data in here, because it's been 
    // assigned before
    for(i = 0; i < $scope.data.length; i++) {
        if($scope.myFilteredKey.indexOf($scope.data[i].key)==-1){
            $scope.myFilteredKey.push($scope.data[i].key);
            console.log($scope.data[i].key);
        }
    }
});

如果您的ConsumptionEngineRESTService還不支持此回調，建議您仔細閱讀angular-resource的文檔。 “卡片”示例代碼的第8行采用了完全相同的模式。

AngularJS：從其余服務獲取數據時出現延遲，導致在使用數據時在html中出現問題

問題描述

1 個解決方案

解決方案1
1 已采納 2013-10-09 11:32:46

AngularJS：從其余服務獲取數據時出現延遲，導致在使用數據時在html中出現問題

問題描述

1 個解決方案

解決方案1 1 已采納 2013-10-09 11:32:46

解決方案1
1 已采納 2013-10-09 11:32:46