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

你应该只是returnpromise从factory到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

usuariosFactory.getUsers 是一个异步函数，由于 $http.get 在里面。因此，要获取您的数据，您必须使用已放入 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();
    });
};

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

工厂

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