角度地理编码结果不同步

Question

我正在尝试使用 google 地理编码作为 POC 来处理我可能正在开发的功能，但是我遇到了问题。

基本上它从用户在搜索输入中输入他们的地址开始，地理编码服务返回地址列表，因为不同的地址可能发生在不同的位置或者如果用户拼写错误，所以用户可以选择正确的。

所以第一步搜索（角度控制器）：

$scope.submit = function(addressform) {
      $scope.addresses = geocoder.getAddressList($scope.formData.address);
}

Geocoder 是一个使用 google map 和 google geocoder 的内部工厂。这是此示例的相关地理编码器代码：

app.factory('geocoder', function(GoogleMap) {
  var geocoder = new google.maps.Geocoder(),
  return {
    getAddressList: function(address) {
      geocoder.geocode( { 'address': address }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          return results;
        } else {
          alert("Couldn't find that address! Google Maps says: " + status);
        }
      });
    }
  }
}); 

这是视图部分：

<ul>
  <li ng-repeat='address in addresses'>
    <a ng-click='displayOnMap()'>{{address.place_id}}</a>
  </li>
</ul>

这应该将地理编码结果写入视图。我遇到的问题是调用地理编码器方法执行的控制器立即返回，但在此之后地理编码器实际上返回结果。

如何让角度控制器等到地理编码器实际调用 return 语句并返回结果，然后我才能更新我的 html？

Answer 1

您将无法逃避geocoder.geocode 是异步的事实。

您有几个选择：第一个是将回调传递给getAddressList，并在成功时调用回调。更有棱角的方式是使用$q service。

getAddressList: function(address) {
  var deferred = $q.defer();

  geocoder.geocode( { 'address': address }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      deferred.resolve(results);
    } else {
      deferred.reject("Couldn't find that address! Google Maps says: " + status);
    }
  });

  return deferred.promise;
}

控制器也需要改变：

$scope.submit = function(addressform) {
  geocoder.getAddressList($scope.formData.address).then(function(result) {
    $scope.addresses = result;
  }, function(err) {
    alert(err);
  });
}

不要从服务发出警报调用。这是一个 UI 问题。