AngularJS控制器调用Factory无法获取$http.get返回值求助

嘿，我来帮你搞定这个问题！你遇到的核心问题是异步操作的时序问题，咱们一步步拆解并解决它。

问题原因 #

$http.get是异步请求，当你在控制器里调用usuariosFactory.getUsers()后，代码会立刻执行scope.usuarios = usuariosFactory.users——这时候请求还没完成，usuariosFactory.users还是初始的空数组。等请求成功返回后，你把f.users重新赋值为服务器返回的新数组，但scope.usuarios已经指向了原来的空数组，两者不再是同一个引用，所以视图不会更新。

解决方案 #

这里给你几种常用的解决方式，按需选择：

方式1：利用回调函数（你已经定义了callback参数，刚好用上） #

修改Factory，在请求成功后调用回调传递更新后的用户数据：

app.factory("usuariosFactory", function ($http) { 
  var f = {}; 
  f.users = []; 
  f.getUsers = function (callback) { 
    var token = window.localStorage.getItem("_token"); 
    $http.get("http://localhost:8000/api/user/list?token=" + token)
      .then(function (response) { 
        f.users = response.data.users; 
        console.log(f.users);
        // 请求完成后调用回调，把最新数据传出去
        if (callback) callback(f.users);
      }); 
  }; 
  return f; 
});

然后在控制器里通过回调赋值：

app.controller("usuariosController", function ($scope, usuariosFactory) { 
  var scope = this; 
  // 初始化先绑定空数组，避免视图报错
  scope.usuarios = usuariosFactory.users;
  
  // 通过回调在请求完成后更新数据
  usuariosFactory.getUsers(function(updatedUsers) {
    scope.usuarios = updatedUsers;
  });
});

方式2：保持数组引用不变（直接更新数组内容） #

如果不想用回调，可以修改Factory里的赋值逻辑——不替换整个数组，而是清空原数组后添加新元素，这样scope.usuarios和f.users始终指向同一个数组，Angular的脏检查会自动检测到内容变化：

app.factory("usuariosFactory", function ($http) { 
  var f = {}; 
  f.users = []; 
  f.getUsers = function (callback) { 
    var token = window.localStorage.getItem("_token"); 
    $http.get("http://localhost:8000/api/user/list?token=" + token)
      .then(function (response) { 
        // 清空原数组，再添加新元素，保持引用不变
        f.users.length = 0;
        Array.prototype.push.apply(f.users, response.data.users);
        console.log(f.users);
        if (callback) callback(f.users);
      }); 
  }; 
  return f; 
});

这时候你原来的控制器代码就可以正常工作了，不需要修改：

app.controller("usuariosController", function ($scope, usuariosFactory) { 
  var scope = this; 
  usuariosFactory.getUsers(); 
  scope.usuarios = usuariosFactory.users; 
});

方式3：返回Promise（更符合Angular异步编程风格） #

让Factory的getUsers返回Promise，控制器里通过then处理结果：

app.factory("usuariosFactory", function ($http) { 
  var f = {}; 
  f.users = []; 
  f.getUsers = function () { 
    var token = window.localStorage.getItem("_token"); 
    // 返回$http的Promise
    return $http.get("http://localhost:8000/api/user/list?token=" + token)
      .then(function (response) { 
        f.users = response.data.users; 
        console.log(f.users);
        return f.users;
      }); 
  }; 
  return f; 
});

控制器里：

app.controller("usuariosController", function ($scope, usuariosFactory) { 
  var scope = this; 
  scope.usuarios = usuariosFactory.users;
  
  usuariosFactory.getUsers().then(function(updatedUsers) {
    scope.usuarios = updatedUsers;
  });
});

总结 #

推荐用方式1或方式3，它们更符合异步编程的最佳实践，代码可读性和可维护性更好；如果想最小化修改代码，方式2也是个不错的选择。

内容的提问来源于stack exchange，提问作者user1174386