AngularJS - Фабрика из Контроллера - не получает значение от $ http.get - PullRequest
Новая
       23

AngularJS - Фабрика из Контроллера - не получает значение от $ http.get

0 голосов
/ 26 мая 2018

У меня есть вопрос новичка здесь.

Я кодирую фабрику в 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;
});

Я сейчас бью головой об стол.Я не понимаю, как этого добиться.

Ответы [ 2 ]

0 голосов
/ 26 мая 2018

Вы должны просто 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;
    });
});
0 голосов
/ 26 мая 2018

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