AngularJS - 處理服務中的異步數據

Question

我想在服務中獲得一些異步數據，需要在那里進一步處理。 代碼在plnkr ，

我使用超時模擬異步調用，一旦收到數據，就會更新UI。 但是，我還需要處理服務中的數據（doubleData），然后在我的UI中使用。 說，我需要用一些細節來增加數據。

因為，當{{doubleData()}}被調用時，數據為空，它永遠不會填充它。 如何實現在我的服務中進一步處理數據的方法（填充異步 - 比如$ http）？

的index.html

<!doctype html>
<html ng-app="myApp"> 
    <head>
        <script type="text/javascript" src="../../../angular-1.0.2/angular.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <div ng-controller="MainCtrl">
            {{data}}<br>
            {{doubleData()}}
        </div>
    </body>
</html>

的script.js

var app = angular.module('myApp',[]);

app.factory('myService', function($timeout) {
  var data = [],
      doubleData = [];

  var myService = {};
  myService.async = function() {
    $timeout(function(){
        data.length = 0;
        for(var i = 0; i < 10; i++){
            data.push({val: Math.random()});                        
        }
    }, 5000); 
  };
  myService.data = function() { return data; };
  myService.doubleData = function() { 
    doubleData = []
    for (var i = 0; i < data.length; i++) {
        doubleData.push({val: 10* data[i]});   
    };    
    return doubleData;                 
  };

  return myService;
});

app.controller('MainCtrl', function( myService,$scope) {
  myService.async();
  $scope.data = myService.data();
  $scope.doubleData = myService.doubleData;

});

輸出（5秒后）：

[{"val":0.4908415926620364},{"val":0.25592787051573396},{"val":0.8326190037187189},{"val":0.6478461190126836},{"val":0.8502937415614724},{"val":0.19280604855157435},{"val":0.06115643493831158},{"val":0.5100495833903551},{"val":0.4134843284264207},{"val":0.5548313041217625}]
[{"val":null},{"val":null},{"val":null},{"val":null},{"val":null},{"val":null},{"val":null},{"val":null},{"val":null},{"val":null}]

Answer 1

看起來您的問題是您需要訪問data[i].val for循環中的拼寫錯誤data[i].val ：

for (var i = 0; i < data.length; i++) {
    doubleData.push({val: 10* data[i].val});   
};

執行此操作的另一種方法（不監視變量的更改）將綁定doubleData ，方法與綁定data方式相同，並在異步回調中調用函數以清空並使用計算值填充doubleData 。 請參閱此plnkr以獲取示例。

AngularJS - 處理服務中的異步數據

問題描述

的index.html

的script.js

輸出（5秒后）：

1 個解決方案

解決方案1
2 已采納 2012-09-20 01:01:23

AngularJS - 處理服務中的異步數據

問題描述

的index.html

的script.js

輸出（5秒后）：

1 個解決方案

解決方案1 2 已采納 2012-09-20 01:01:23

解決方案1
2 已采納 2012-09-20 01:01:23