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变量范围

回答

相关问题