Cakupan variabel AngularJS [duplikat]

Saya mencoba mendapatkan file json di dalam pengontrol dengan $http.get. Semuanya baik-baik saja sampai saya mencoba mengakses properti yang menyimpan respons. Jika saya mencoba console.log(property) di dalam $http.get() ia akan menampilkan objek yang dikembalikan, di luar $http.get() mengakses properti yang sama dan hasilnya tidak terdefinisi! Saya bahkan mencoba melampirkannya ke $scope dan hasilnya sama?!

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 sumber

Jawaban (3)


arrow_upward
0
arrow_downward

Dalam kasus Anda, masalahnya adalah $http.get data respons adalah metode pengikatan yang terlambat. Respons metode ini hanya akan tersedia setelah panggilan layanan selesai. Ini adalah metode asinkron sehingga tidak dapat diakses di dalam cakupan seperti yang Anda harapkan. Untuk itu Anda perlu mengikat respons Anda di dalam variabel $scope dan menggunakannya nanti di dalam pemanggilan fungsi.

Anda perlu memanggil metode self.getResponseData terlebih dahulu, misalnya pada saat inisialisasi pengontrol. Setelah itu panggil metode self.logResponseData untuk mencatat data respons.

Anda mungkin perlu mengubah panggilan Anda seperti ini.

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
Terima kasih! Ini berhasil! Saya hanya ingin tahu cara kerjanya sebelumnya di skrip lain dan bukan sekarang?! Tidak ada yang berbeda, hanya pengontrol lain dengan nama berbeda ... - person Bozhidar Georgiev; 05.03.2017
comment
Ini dimaksudkan agar berfungsi seperti yang saya sebutkan karena ini adalah panggilan respons yang terlambat. Saya bertanya-tanya bagaimana ini bekerja sebelumnya!! - person Nitheesh; 05.03.2017

arrow_upward
0
arrow_downward

self.formdata = respon.data.jsondatavariablename;

// Gunakan nama data JSON

person Srikrushna    schedule 05.03.2017
comment
Saya pikir itu berhasil. Jika ada masalah lain, berikan file JSON. - person Srikrushna; 05.03.2017
comment
Saya memerlukan semua properti dari JSON ini - person Bozhidar Georgiev; 05.03.2017

arrow_upward
0
arrow_downward

$http.get() bersifat asynchronous yang secara kasar berarti bahwa ketika Anda memanggil ini, ia mengirimkan permintaan dan tidak menghentikan kode di sini untuk menunggu sampai ia merespons, eksekusi pernyataan berikutnya dilanjutkan meskipun respons masih belum datang dan Anda tidak memiliki data darinya. Itu sebabnya Anda memerlukan fungsi panggilan balik dalam metode .then(), fungsi ini dipanggil saat Anda mendapat respons, tempat Anda dapat menggunakan data respons Anda. Misalnya, Anda dapat menetapkannya ke beberapa properti $scope dan nilai ini akan diperbarui di mana pun Anda menggunakan properti ini.

$http menggunakan apa yang disebut Promises untuk mencapai hal ini. Saya mencoba membuatnya sederhana tetapi jika Anda ingin mengetahui lebih detail cara kerjanya, tebak itulah yang akan membantu Anda: Janji

person Max    schedule 05.03.2017