一尘不染

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

angularjs

我在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,因此在某个地方可能是一个简单的错误。

我需要确保该服务在控制器加载 之前 返回数据。如何做到这一点


阅读 204

收藏
2020-07-04

共1个答案

一尘不染

您可以使工厂返回如下承诺:

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

这样可以保证,无论何时使用该服务,它始终会 同步地 为您提供数据,而不必在加载控制器之前加载任何数据。

2020-07-04