Question

我页面中的所有服务器数据访问都是由我的RequestFactory提供程序执行的。（RequestFactory使用$ http来执行实际的服务器调用。）

我的控制器范围引用了从RequestFactory返回的数据列表。

我的问题是，由于RequestFactory调用是异步的，并且RequestFactory没有（也不应该）访问控制器范围，RequestFactory将数据传递给控制器的正确方法是什么？

var requestFactory = {};
angular.module("myApp").factory("RequestFactory", function($http) {
    requestFactory.fetch = function() {
        $http.get(url).
            success(function(data) {
                controller.setData(data)
            }).
            error(function(data, status) {
                console.info("fetch Failed. Error code: " + status + " Url:" + url);
            }).finally(function() {
                controller.setSubmitting(false);
            });
    };
    return requestFactory;
});

Answer 1

您可以执行以下操作：

<强>服务

(function(){

  function Service($http){

    function get(){
      //We return a promise
      return $http.get('path_to_url');
    }

    var factory = {
      get: get
    };

    return factory;

  }

  angular
    .module('app')
    .factory('Request', Service);

})();

<强>控制器

(function(){

function Controller($scope, $q, Request) {

  var defer = $q.defer();

  //Call our get method from the Request Factory
  Request.get().then(function(response){
    //When we get the response, resolve the data
    defer.resolve(response.data);
  });

  //When the data is set, we can resolve the promise
  defer.promise.then(function(data){
    console.log(data);
  });

}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

如您所知，$http服务返回承诺，在此之后，您可以轻松地将它们组合起来。

Answer 2

您应该从工厂返回承诺。见下面的摘录。

.factory("RequestFactory", function($http) {
   return {
     fetch : function() {
        return $http.get(url).then(function(result) {
           return result.data;
        });
     }
   }
});

在您的控制器中，您应该使用

.controller('MainCtrl', function($scope, RequestFactory) {
  RequestFactory.fetch().then(function(data) 
     $scope.foo = data;
  });
});

我应该如何将数据从异步服务设置为控制器$ scope？

2 个答案: