ng-repeatの項目から逆ジオコードをフェッチして表示AngularJS

Question

私のデータベースからGoogleマップに表示する領域のリストをプルします。 reverse geocodingを使って各エリアに最も近い都市を表示したいが、それを稼働させることはできない。 私はAngularJSと約束した経験があり、Stackoverflowを検索しましたが、この問題の解決策は見つかりませんでした。

HTML：

<div ng-repeat="area in vm.areas"> 
<span>{{area.name}}</span> 
<span>Close to: </span> <span>{{vm.getCity(area)}}</span> 
</div> 

JS：

vm.getCity = function(area){ 
var center = getCenter(area.paths); 
getAddress(center[0], center[1]).then(function(city){ 
    console.log(city); 
    return city; 
}) 
} 

function getAddress (latitude, longitude) { 
    return $q(function (resolve, reject) { 
     var request = new XMLHttpRequest(); 

     var method = 'GET'; 
     var url = 'http://maps.googleapis.com/maps/api/geocode/json?latlng=' + latitude + ',' + longitude + '&sensor=true'; 
     var async = true; 

     request.open(method, url, async); 
     request.onreadystatechange = function() { 
      if (request.readyState == 4) { 
       if (request.status == 200) { 
        var data = JSON.parse(request.responseText); 
        var results = data.results; 
        var returnString = "" 
        for(var i=0; i<results.length; i++){ 
        var types = results[i].types; 
        if(types[0] === 'locality'){ 
         returnString = results[i].address_components[0].long_name; 
        } 
        } 
        resolve(returnString); 
       } 
       else { 
        reject(request.status); 
       } 
      } 
     }; 
     request.send(); 
    }); 
}; 

私は正しい都市がコンソールに表示されているが、それらはビューに表示されないことがわかります。どのような助けが大いに感謝！

Answer 1

Angular's $http serviceを使用していない理由は何ですか？それを使用せず、カスタムHTTP呼び出しを行うことで、Angularはあなたがそれをやっていることを知らない。したがって、データを取得すると、Angularは変更されたことを知らず、データやビューを更新しません。 Angularの$httpサービスを利用する場合は、そのエコシステム内にとどまり、変更内容を把握することができます。代わりに、ディレクティブを使用してそれを解決するために管理

$http({ 
    method: 'GET', 
    url: 'http://maps.googleapis.com/maps/api/geocode/json?latlng=' + latitude + ',' + longitude + '&sensor=true' 
}).then(function successCallback(response) { 
    // var data = ...... 
}, function errorCallback(response) { 

});