Область действия переменной AngularJS

Я пытаюсь получить файл json в контроллере с помощью $http.get. Все хорошо, пока я не попытаюсь получить доступ к свойству, которое содержит ответ. Если я попробую console.log(property) внутри $http.get(), он выведет возвращенный объект, а снаружи $http.get() получит доступ к тому же самому свойству и выведет undefined! Я даже пытаюсь прикрепить его к $scope, и результат тот же?!

angular.module('todayfmApp')
    .controller('MainCtrl', ['$http', '$scope', function ($http, $scope) {

        var self = this;

        $http.get('data/form-data.json').then(function(response) {
            self.formdata = response.data;

            console.log(self.formdata);
        });

        console.log(self.formdata);


    }]);


{
    "settings": {
        "version": "",
        "Step": "",
        "filterBreak": "",
        "pid": ""
        },
    "category": [
        { "name": "Select All", "selected": true },
        { "name": "Carlow", "value": "Carlow" },
        { "name": "Cavan", "value": "Cavan" },
        { "name": "Clare", "value": "Clare" },
        { "name": "Cork", "value": "Cork" },
        { "name": "Derry", "value": "Derry" },
        { "name": "Donegal", "value": "Donegal" },
        { "name": "Down", "value": "Down" },
        { "name": "Dublin", "value": "Dublin" },
        { "name": "Galway", "value": "Galway" },
        { "name": "Kerry", "value": "Kerry" },
        { "name": "Kildare", "value": "Kildare" },
        { "name": "Kilkenny", "value": "Kilkenny" },
        { "name": "Laois", "value": "Laois" },
        { "name": "Leitrim", "value": "Leitrim" },
        { "name": "Limerick", "value": "Limerick" },
        { "name": "Louth", "value": "Louth" },
        { "name": "Mayo", "value": "Mayo" },
        { "name": "Meath", "value": "Meath" },
        { "name": "Monaghan", "value": "Monaghan" },
        { "name": "Offaly", "value": "Offaly" },
        { "name": "Roscommon", "value": "Roscommon" },
        { "name": "Sligo", "value": "Sligo" },
        { "name": "Tipperary", "value": "Tipperary" },
        { "name": "Waterford", "value": "Waterford" },
        { "name": "Westmeath", "value": "Westmeath" },
        { "name": "Wexford", "value": "Wexford" },
        { "name": "Wicklow", "value": "Wicklow" }
    ],
    "num_nights": [
        { "name": "1 Night", "value": 1, "selected": true},
        { "name": "2 Nights", "value": 2 },
        { "name": "3 Nights", "value": 3 },
        { "name": "4 Nights", "value": 4 },
        { "name": "5 Nights", "value": 5 },
        { "name": "6 Nights", "value": 6 },
        { "name": "7 Nights", "value": 7 }
    ],
    "num_rooms": [
        { "name": "1 Room", "value": 1, "selected": true },
        { "name": "2 Rooms", "value": 2 },
        { "name": "3 Rooms", "value": 3 },
        { "name": "4 Rooms", "value": 4 }
    ],
    "num_adults": [
        { "name": "1 Adult", "value": 1 },
        { "name": "2 Adult", "value": 2, "selected": true }
    ],
    "num_child": [
        { "name": "0 Kids", "value": 0, "selected": true },
        { "name": "1 Kids", "value": 1 },


{ "name": "2 Kids", "value": 2 }
]

}


angularjs angularjs-scope
person Bozhidar Georgiev    schedule 05.03.2017    source источник

Ответы (3)


arrow_upward
0
arrow_downward

В вашем случае проблема заключается в том, что данные ответа $http.get являются методом поздней привязки. Ответ этого метода будет доступен только после завершения вызова службы. Это асинхронный метод, поэтому он не будет доступен внутри области видимости, как вы ожидаете. Для этого вам нужно связать свой ответ внутри переменной $scope и использовать его позже внутри вызова функции.

Сначала вам нужно будет вызвать метод self.getResponseData, скажем, во время инициализации контроллера. Там после вызова метода self.logResponseData для регистрации данных ответа.

Возможно, вам придется изменить свои вызовы примерно так.

angular.module('todayfmApp')
.controller('MainCtrl', ['$http', '$scope', function ($http, $scope) {

    var self = this;
    // Get the response data with service call
    self.getResponseData = function(){
        $http.get('data/form-data.json').then(function(response) {
            self.formdata = response.data;

            console.log(self.formdata);
        });
    }

    //Method to read the response data later
    self.logResponseData = function() {
        console.log(self.formdata);
    }

    //Call the method at the time controller loaded to initialize the `self` variable
    self.getResponseData();

}]);
person Nitheesh    schedule 05.03.2017
comment
Спасибо! Это сработало! Я просто хочу знать, как это работало раньше в другом скрипте, а не сейчас?! Ничего особенного, просто еще один контроллер с другим именем... - person Bozhidar Georgiev; 05.03.2017
comment
Это предназначено для работы, как я уже упоминал, потому что это поздний ответный звонок. Интересно, как это работало раньше!! - person Nitheesh; 05.03.2017

arrow_upward
0
arrow_downward

self.formdata = response.data.jsondatavariablename;

// Использовать имя данных JSON

person Srikrushna    schedule 05.03.2017
comment
Я думаю, это работает. Если есть какие-либо другие проблемы, дайте файл JSON. - person Srikrushna; 05.03.2017
comment
Мне нужны все свойства из этого JSON - person Bozhidar Georgiev; 05.03.2017

arrow_upward
0
arrow_downward

$http.get() является асинхронным, что примерно означает, что когда вы вызываете это, он отправляет запрос и не останавливает код здесь, чтобы дождаться ответа, выполнение следующих операторов продолжается, хотя ответ все еще не пришел, и у вас нет данных от него. Вот почему вам нужна функция обратного вызова в методе .then(), она вызывается, когда вы получаете свой ответ, где вы можете использовать свои данные ответа. Например, вы можете назначить его некоторому свойству $scope, и оно будет обновлять это значение везде, где вы используете это свойство.

$http использует для этого так называемые Promises. Я пытался сделать его простым, но если вы хотите узнать подробнее, как это работает, думаю, вот что вам поможет: Обещание

person Max    schedule 05.03.2017