ขอบเขต AngularJS ของตัวแปร [ซ้ำกัน]

ฉันกำลังพยายามรับไฟล์ json ภายในคอนโทรลเลอร์ด้วย $http.get ทั้งหมดก็ดีจนกระทั่งฉันพยายามเข้าถึงทรัพย์สินที่มีการตอบรับ ถ้าฉันลอง console.log(property) ภายใน $http.get() มันจะส่งออกอ็อบเจ็กต์ที่ส่งคืน ภายนอก $http.get() เข้าถึงคุณสมบัติเดียวกันมากและเอาต์พุตไม่ได้กำหนด! ฉันยังพยายามที่จะแนบมันเข้ากับ $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