Получить ссылку на служебные данные в контроллере из асинхронного запроса (AngularJS) - PullRequest
0 голосов
/ 27 декабря 2018

У меня возникли некоторые проблемы, связанные с обменом данными между контроллерами.Я хочу получить данные из базы данных (через запрос $ http), сохранить их в служебной переменной, а затем разделить их между различными контроллерами.Из того, что я понимаю, это позволило бы моему представлению автоматически обновляться при изменении данных.

Кажется, это довольно просто с переменными, которые просто объявляются внутри службы и доступны через геттер через контроллеры.Но данные, которыми я пытаюсь поделиться, поступают из асинхронной операции, и я изо всех сил пытаюсь получить к ней доступ.

Я придумал следующий код, и я не понимаю, почему я продолжаю получать "undefined "переменная.

Файл: userController.js

function userController($scope, user)  //user = userService
{
    user.getChallengeList(25)
    .then(function(defiList)
    {
        $scope.allDefis = defiList;
        console.log($scope.allDefis);  //ok
        console.log(user.allDefis);  //undefined
    });
}

Файл: userService.js

function userService($http)
{
    this.allDefis;

    this.getChallengeList = function(id)
    {
        return $http
        .post('http://localhost:3131/defi/defiList', {'id': id})
        .then(function(response)
        {
            this.allDefis = response.data;
            return this.allDefis;
        });
    }
}

Из этого фрагмента кода переменная allDefis не должна бытьбыть доступным внутри контроллера?

Разве использование .then в контроллере не «заставляет» его ждать выполнения метода getChallengeList ()?

В таком случае, почемуПеременная user.allDefis undefined?

Думаю, я мог бы решить эту проблему с помощью $ rootcope, но я бы предпочел этого не делать, поскольку это не похоже на рекомендуемое решение.

1 Ответ

0 голосов
/ 27 декабря 2018

Ваша проблема заключается в реализации getChallengeList:

this.getChallengeList = function(id)
{
    return $http
    .post('http://localhost:3131/defi/defiList', {'id': id})
    .then(function(response)
    {
        this.allDefis = response.data; //<-- this is scoped here
        console.log(this.allDefis);
        return this.allDefis;
    });
}

Когда вы присваиваете данные ответа на веб-запрос для allDefis, this находится в пределах анонимной функции, скореечем общая функция.

Метод для решения этой проблемы состоит в том, чтобы определить локальную переменную, которая указывает на this, и использовать ее вместо этого.

Вы бы скорректировали свою реализацию следующим образом:

this.getChallengeList = function(id)
{
    var _this = this; // a reference to "this"

    return $http
    .post('http://localhost:3131/defi/defiList', {'id': id})
    .then(function(response)
    {
        _this.allDefis = response.data; // now references to correct scope
        console.log(this.allDefis);
        return this.allDefis;
    });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...