AngularJs 定义全局变量，服务内容为空

Question

我正在编写我的第一个 AngularJs 应用程序。应用需要知道不同 Controller 中的当前用户。当前用户通过休息调用检索。首先，我使用 $scope 在页面顶部添加了当前用户信息:

var currentUser = {};
app.controller('currentUserCtrl', function($scope, $http) {
    $scope.currentUser = null;
    $http.get(rootUrl + '/timetracker/user/current').success(
            function(response) {
                $scope.currentUser = response;
                currentUser = response;
            });
}

);

Controller 工作正常，但其他 Controller 无法访问“currentUser”。我的第二次尝试(在阅读了全局变量之后)是使用 $rootScope。所以我改变了上面的 $rootScope.currentUser = response;并省略了 var currentUser .我添加了 $rootScope我所有的 Controller 都试图得到 currentUser.id .但这也不起作用——用户对象为空。我的第三次尝试是使用工厂:

app.factory('currentUser', function($http){
    var currentUser = {};
    $http.get(rootUrl + '/timetracker/user/current').success(
            function(response) {
                currentUser = response;
            });
    return currentUser;
});

我的 Controller 现在注入(inject)“currentUser”，但这也是空的(我想要获得的所有值都是“未定义”)。那么如何让当前用户全局可用呢？

可能是在异步调用和变量写入成功之前使用了 currentUser 吗？如何确保 currentUser 调用已完成？

编辑
使用 currentUser 的 Controller :

app.controller('createBookingCtrl', function($scope, $http, $filter, currentUser) {
    //list of projects for current user (usersprojects)
    $scope.projectsList = {};
    $http.get(rootUrl + '/timetracker/usersprojects/user/' + currentUser.id).success(function(response) {
        for (var i = 0; i < response.length; ++i)
            //map users project by projects name
            $scope.projectsList[response[i].project.name] = response[i];
    });
});

currentUser.id具有未定义的值。

第二次编辑
我刚刚用js调试器测试过:工厂内 currentUser = response在其他 Controller 访问该值之后运行。那么如何确定/等待响应？

Answer 1

在 aSync 上下文(如 javascript)中，一切都与 promise 有关。

我的猜测是将操作/提供 currentUser 的责任放在服务/工厂中。你所有的 Controller 都会在那里询问 currentUser 。这样，您可以确保始终获得 currentUser 的有效版本。问题是要知道这个 currentUser 对象什么时候准备好，这就是为什么你需要使用 promise object这将告诉您何时采取行动。

假设你有一个带有 getCurrentUser 方法的 CurrentUserService，这个方法将返回一个 promise 对象:

app.service('CurrentUserService', function($http) {
  var currentUser,
      urlToCurrentUser = 'http://example.com/currentUserAPI';

  function getCurrentUser() {
    return $http.get(urlToCurrentUser).success(
      function(response) {

        currentUser = response;

        return currentUser;
      });
  }

  return {
    getCurrentUser: getCurrentUser
  };
});

现在，让我们看看需要这个 currentUser 的 Controller 的行为。

首先， Controller 需要访问我们的 CurrentUserService。然后，它只会调用服务上的 getCurrentUser。

app.controller('SomeControllerController', function(CurrentUserService) {
  var currentUserInTheController;

  ...
  CurrentUserService.getCurrentUser().then(function(currentUser){
       currentUserInTheController = currentUser;
       // from here and only in the current function, currentUserInTheController is defined for sure !
  });
  ...
});

这里的关键是 .then() 方法。
仅当 $http 为 时才会调用此方法已解决 (所以 promise )。
因此，重要的是要了解，如果您尝试在此“解决”之前访问 currentUserInTheController，它将是未定义的。

为了确定没有未定义的 currentUserInTheController，您需要在 .then() 的回调函数中对其执行所有操作(请参阅代码中的注释)

promise 机制的科学对于理解 javascript 至关重要；)

阅读更多 :
http://andyshora.com/promises-angularjs-explained-as-cartoon.html
和
AngularJS : Where to use promises?