当我使用数据绑定时，angular地理编码器失败

angular geocoder fails when I use data binding

本文关键字：angular 编码器 失败 定时 数据 绑定      更新时间：2023-09-26

我使用的是：http://jasonwatmore.com/post/2014/02/15/AngularJS-Reverse-Geocoding-Directive.aspx

基本上，当我使用时，它工作得很好

<reverse-geocode lat="40.730885" lng="-73.997383" />

但是，问题是。。

当我有这样的：

<reverse-geocode lat="{{vm.user.location[1]}}" lng="{{vm.user.location[0]}}"></reverse-geocode>

它不适用于｛｛vm.user.location[1]｝｝和｛vm.user.location[0]｝的值，因为出于某种原因，它传递的是0而不是实际值。。

当我把它输入到一个跨度中时，值会显示得很好。

<span> Lat:{{vm.user.location[1]}}, Long:{{vm.user.location[0]}} </span>

我不知道发生了什么：（

为什么它认为我传递的是0的值，而不是数据库中的实际lat/long值？

您需要观察属性的变化，因为您是动态加载位置数据的，所以当这些值发生变化时，您还需要更新指令。

以下是如何添加观察行为：

.directive('reverseGeocode', function ($timeout) {
    return {
        restrict: 'E',
        template: '<div></div>',
        link: function (scope, element, attrs) {
            attrs.$observe('lat', geoCode);
            attrs.$observe('lng', geoCode);
            function geoCode() {
                $timeout(function() {
                    var geocoder = new google.maps.Geocoder();
                    var latlng = new google.maps.LatLng(attrs.lat, attrs.lng);
                    geocoder.geocode({ 'latLng': latlng }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            if (results[1]) {
                                element.text(results[1].formatted_address);
                            } else {
                                element.text('Location not found');
                            }
                        } else {
                            element.text('Geocoder failed due to: ' + status);
                        }
                    });
                });
            }
        },
        replace: true
    }
})

演示：http://plnkr.co/edit/PehccH32xMzlbhsRD0FI?p=info

相关文章：