AngularJS

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

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

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

工厂

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

Answer 2

你应该 return promise 从 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;
    });
});

AngularJS - 来自 Controller 的工厂 - 未从 $http.get 获取价值

AngularJS - Factory from Controller - not getting value from $http.get

angularjs-controller

angularjs-factory

angularjs-http