如何将异步服务中的数据设置到控制器$scope中?

How should I set data from an asynchronous service into a controller $scope?

本文关键字：控制器 scope 设置 异步 服务 数据      更新时间：2023-09-26

页面中的所有服务器数据访问都由我的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;
});

您应该返回工厂的承诺。参见下面的代码片段。

.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;
  });
});

您可以这样做:

(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服务返回承诺，因此在此之后，您可以轻松地将它们组合在一起。

相关文章：