从ng-repeat AngularJS

时间:2017-09-06 10:27:53

标签: javascript angularjs google-maps google-maps-api-3

我从我的数据库中提取要在Google地图上显示的区域列表。我还希望使用reverse geocoding显示距离每个区域最近的城市,但无法使其发挥作用。 我对AngularJS和promises有一些经验,并且已经搜索过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();
  });
};

我可以看到正确的城市显示在控制台中,但它们在视图中不可见。任何帮助非常感谢!

1 个答案:

答案 0 :(得分:0)

您未使用Angular's $http service的任何原因?通过不使用它并进行自定义HTTP调用,Angular不知道你在做什么。因此,当您获得数据时,Angular不知道某些内容已发生变化,并且不会刷新数据或视图。 如果您使用Angular的{{1}}服务,您将留在其生态系统中并让它了解您的更改。

{{1}}