変数のAngularJSスコープ

Question

$ http.getでコントローラ内でjsonファイルを取得しようとしています。すべて私は応答を保持するプロパティにアクセスしようとするまで。 $ http.get（）の中でconsole.log（プロパティ）を試してみると、$ 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 } 
] 

}

Answer 1

を使用してください。このメソッドの応答は、サービスコールの終了後にのみ使用可能になります。これは非同期メソッドなので、スコープ内ではアクセスできません。そのためには、あなたの応答を$ 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(); 

}]); 

Answer 2

self.formdata = response.data.jsondatavariablename。

//問題が$http.get応答データは、遅延バインディングメソッドであるということであるあなたのケースではJSONデータ名

Answer 3

$http.get()は大体あなたがこれを呼び出すとき、それはあなたの要求を送信し、それが次の文の実行は継続され、応答するまでの応答が来ていない、まだですが、待つためにここでコードを停止しないことを意味している非同期ですそこからのデータはありません。そのため、.then()メソッドでコールバック関数が必要な理由は、レスポンスデータを使用できるレスポンスを取得したときにコールされているためです。たとえば、それをいくつかの$scopeプロパティに割り当てることができ、このプロパティを使用するたびにこの値が更新されます。

$httpは、これを達成するためにいわゆるPromiseを使用します。私はそれを単純化しようとしましたが、それがどのように機能するかをもっと詳しく知りたい場合は、それがあなたを助けるものと推測します。Promise