AngularJS - $ scope变量不存储函数外部的数据

Question

我的内容中有一个非常简单的函数controller:

fetchUsers = function () {
  UserService.getUsers().
  success(function(data, status) {
    $scope.users = data.users;
    console.log($scope.users);
  });
};

fetchUsers();

console.log($scope.users);

它基本上是使用a service从一个中检索一些数据API,并且console.log函数内部工作正常,并将一个数组发送到控制台[Object Object],我可以打开它,看看我的所有用户都没问题.但是,当我通过调用fetchUsers()并运行一个函数而将其放在函数外部时,console.log我只需返回一个空数组,然后[]输出到控制台.

谁能想到会导致这种情况的任何事情？我有点困惑.

Answer 1

啊,我看到你终于遇到了异步的javascript代码.并非一切都按顺序运行.

例如,如果我有这段代码

setTimeout(function(){
    var test = 'hello';
    console.log('first test : ' + test);
}, 1000)

console.log('second test : ' + test);

您会注意到,即使先前设置了测试(就行号而言),第二次测试也不会返回任何内容.现在你可能会想,所以你把它设置为1000毫秒(但尝试相同的代码并将其设置为0秒,你会看到相同的效果.这是由于用于管理异步代码的事件循环 - 基本上你的setTimeout中的任何内容放在优先级的末尾,这意味着当第二个控制台日志被调用时 - 测试尚未定义.

为什么异步你问？浏览器的东西是UI,javascript在同一个线程上运行,所以想象一下如果setTimeout卡在那里并等待1秒,你的UI中没有任何东西可以工作 - 它会冻结.

话虽如此,异步代码的另一个重要用途是对服务器的http请求.这些请求可以采用时间变量,这意味着如果您使用同步代码,您的UI将会冻结.想象一下facebook - 它不断从服务器中检索数据.

回到你的代码,下面这个方法从服务器检索数据

UserService.getUsers().
  success(function(data, status) {
    $scope.users = data.users;
    console.log($scope.users);
  });

成功函数中的内容也是异步的,所以无论你放在那之后会立即运行,成功函数内部的任何内容都将在你的'promise'或请求完成后运行.

因此你可能有

fetchUsers();

console.log($scope.users);

但请注意,$ scope.users是在此console.log之后设置的