强制AngularJS服务在加载控制器之前返回数据

时间:2013-08-28 00:50:24

标签: javascript angularjs angularjs-service

我在Angular中有一项服务,它使用我的API获取用户信息并将其提供给我的控制器。它的设置如下:

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngResource', 'infinite-scroll', 'ui.bootstrap', 'ngCookies', 'seo'])
  .service('userInfo', function($http, $cookies){
    $http.get('/api/users/' + $cookies.id).
    success(function(data) {
      var userInfo = data.user[0];

      return userInfo;
    });
  }). // other stuff comes after this

在我的控制器中,我将它包括在内:

function userProfile($scope, $cookies, userInfo, $http, $resource, $routeParams, $rootScope){
    $scope.user = userInfo;
    console.log('user info is')
    console.log(userInfo);

这不返回任何数据,而如果我在控制器本身放置相同的服务功能,它返回就好了。我在这里错过了什么?从来没有在Angular中使用DI / Services,因此在某处可能是一个简单的错误。

我需要确保服务在 控制器加载之前返回数据 。如何实现这一目标

4 个答案:

答案 0 :(得分:42)

你可以让工厂回复这样的承诺:

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngResource', 'infinite-scroll', 'ui.bootstrap', 'ngCookies', 'seo'])
    .service('userInfo', function ($http, $cookies) {
    var promise = $http.get('/api/users/' + $cookies.id).
    success(function (data) {
        var userInfo = data.user[0];
        return userInfo;
    });
    return promise;
}) // other stuff comes after this

在您的控制器中,执行

function userProfile($scope, $cookies, userInfo, $http, $resource, $routeParams, $rootScope){
    userInfo.then(function(data){
        $scope.user = data;
    });
}

这可以保证无论何时使用该服务,它总是为您提供数据同步,您无需在加载控制器之前加载任何数据。

答案 1 :(得分:17)

您的userInfo服务必须返回$http返回的承诺。然后,该承诺将被注入您的控制器,并且一旦承诺成功解决,视图将立即更新。


如果您不希望在userInfo结算之前完全呈现视图,则应在路线上设置resolve属性,并在那里注入您的服务:

$routeProvider.when('/profile', {
    templateUrl: 'profile',
    controller: userProfile,
    resolve: {
         userInfoData: function ($q, userInfo) {
             return userInfo;
         }
    }
});

然后只需将userInfoData注入您的控制器,而不是userInfo服务。

答案 2 :(得分:0)

您可以将资源对象分配给您的变量 返回$ http.get(url)

答案 3 :(得分:0)

我遇到了同样的问题,我不得不使用$ resource将数据加载到服务中,并将数据转换为控制器$ scope。 我不想直接返回promise,然后在控制器中使用一个解析器(如@zsong写的那样),但是要将所有的魔法都用于服务,并使用能力直接将一个promise分配给$ scope作为@Joseph西尔伯指出,所以这就是我所做的:

return function($scope){promise.then(function(data){$scope.user = data})};

并在控制器中使用它:

userInfo($scope);

没有太大的改进,但它让我的控制器中的语法更清晰,希望它在三年之后也会有所帮助!