AngularJS變量範圍

我試圖用$ http.get獲得一個控制器內的json文件。一切順利，直到我嘗試訪問持有響應的財產。如果我在$ http.get（）中嘗試console.log（property），它會輸出返回的對象，而不是在$ http.get（）之外訪問同一個屬性，並輸出undefined！我甚至試圖把它附加到$範圍，這是相同的結果？！AngularJS變量範圍

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 } 
]

}

來源

2017-03-05 Bozhidar Georgiev

在你的情況的問題是，$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(); 

}]);

來源

2017-03-05 15:22:54 Nitheesh

謝謝！這工作！我只是想知道它是如何工作在另一個腳本，而不是現在？！沒有什麼不同，只是另一個名稱不同的控制器... –

這是爲了像我之前提到的那樣工作，因爲這是一個延遲響應呼叫。我想知道這是如何工作的！ – Nitheesh

self.formdata = response.data.jsondatavariablename;

//使用JSON數據名稱

來源

2017-03-05 15:13:31

我認爲它有效。如果有其他問題給出JSON文件。 –

我需要這個JSON的所有屬性 –

$http.get()是異步這大概意味着，當你調用這個發送請求，並在這裏不停止代碼等待，直到它反應了，下一個報表中繼續執行，雖然反應仍然還沒有來，你沒有數據。這就是爲什麼你需要在.then()方法中使用回調函數的原因，當你得到你的迴應時，它會被調用，你可以在那裏使用你的回覆數據。例如，您可以將其分配給某個$scope屬性，並且在使用此屬性的任何地方都會更新此值。

$http使用所謂的Promise來實現這一點。我試圖簡化它，但如果您想知道更詳細的工作方式，請參考以下內容：Promise

來源

2017-03-05 15:24:37 Max

AngularJS變量範圍

回答

相關問題