AngularJS - 来自控制器的工厂 - 不从 $http.get 获取值

Question

我这里有一个新手问题。

我正在用angularJS编写一个工厂。有了它，我想要一个用户列表，以及一种填充它的方法。

所以这是我的代码...

工厂简介

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;
/* the console.log outputs OK with the users from the server */
console.log(f.users);
});
}; 
return f;
});

控制器

app.controller("usuariosController", function ($scope, usuariosFactory) {
var scope = this;
/* link users from factory to controllerś scope .. NOT WORKING */
usuariosFactory.getUsers();
scope.usuarios = usuariosFactory.users;
});

我现在正把头撞到桌子上。我不明白如何实现这一目标。

Answer 1

您应该将promise从factoryreturn到controller

然后在controller中，您应该subscribe该promise并将数据分配给您的scope variable

厂：

app.factory("usuariosFactory", function ($http) {
var f = {};
f.users = [];
f.getUsers = function (callback) {
var token = window.localStorage.getItem("_token");
return $http.get("http://localhost:8000/api/user/list?token=" + token);
};
return f;
});

控制器：

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

Answer 2

由于内部$http.get，usuariosFactory.getUsers是一个异步函数。因此，要获得数据，您必须使用已经放入getUsers的回调函数。代码应该是这样的：

usuariosFactory.getUsers(function () {
scope.usuarios = usuariosFactory.users;
});

在f.users = response.data.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;
callback();
});
};

这样，您将使用回调函数处理异步函数。另一种方法是使用承诺，这样，你的代码应该是这样的：

工厂简介

app.factory("usuariosFactory", function ($http, $q) {
var f = {};
f.users = [];
f.getUsers = function (callback) {
var token = window.localStorage.getItem("_token");
var deferred = $q.defer(); // Creates the object that handles the promise
$http.get("http://localhost:8000/api/user/list?token=" + token)
.then(function (response) {
f.users = response.data.users;
deferred.resolve('You can pass data!'); // Informs that the asynchronous operation have finished
});
return deferred.promise; // Returns a promise that something will happen later
};
return f;
});

控制器

app.controller("usuariosController", function ($scope, usuariosFactory) {
var scope = this;
// Now you can use your function just like you use $http
// This way, you know that watever should happen in getUsers, will be avaible in the function
usuariosFactory.getUsers()
.then(function (data) {
console.log(data) // Print 'You can pass data!'
scope.usuarios = usuariosFactory.users; 
});
});