如何等待在angularJS中获取异步数据？

Question

我有一个填充视图数据的服务。视图数据取决于从数据库中获取的数据，并且需要等待数据加载。

E.g：

services.factory('viewService', function (serviceX) { 
    var generateView = function (s) { 
     var data=[]; 
     var viewData=[]; 
     serviceX.getData().then(function (d) { 
      data=d; 
     }); 
     console.log("data:"+d); 
     for(x in data){ 
      viewData[x]=data[x].view; 
      .... 
     } 
     return viewData; 
    }; 
    return{ 
     generateView: generateView 
    } 
}); 

的serviceX.getData()已经使用了promise模式。该行for(x in data){需要该数据来生成viewData。

Answer 1

你可以将它绑定到你的作用域变量。 AngularJS会自动等待数据，然后开始渲染。当然，在将其设置在范围之前，您需要修改从回调函数中获取的数据。

在你的情况下，这意味着你的服务的generateView方法需要返回一个你可以在范围变量上设置的承诺。

Answer 2

您应该使用承诺，分离关注：

angular.module('myModule', []) 

.factory('Table', function($resource, $q) { 
    return { 
    data: function() { 
     edsql = edsql || ''; 
     var deferred = $q.defer(); 
     $resource('my-resource-url').get({}, function(r) { 
     deferred.resolve(r); 
     }, deferred.reject); 

     return deferred.promise; 
    } 
    }; 
}); 

而且随着你的控制器如下方式使用它：

$scope.data = Table.data(); 

Answer 3

另一种方法是使用延迟&承诺。

更多的信息：http://docs.angularjs.org/api/ng。$ q