CODEWITHSUNDEEP
javascriptangularjs
user1354934
user1354934

Reputation: 8841

angular geocoder fails when I use data binding

I am using this: http://jasonwatmore.com/post/2014/02/15/AngularJS-Reverse-Geocoding-Directive.aspx

Basically, I have it working fine when I use this:

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

But, here is the issue..

When I have it like this: 

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

It doesn't work with the values for {{vm.user.location[1]}} and {{vm.user.location[0]}} because for some reason its passing 0 instead of the real values..

When I type this into a span, the values come out just fine. 

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

I'm not sure what's going on :(

Why does it think I am passing it values of 0 and not the actual lat/long values from my db?

Upvotes: 3

Views: 109

Answers (1)

dfsq
dfsq

Reputation: 193291

You will need to observe attributes changes, since you are loading location data dynamically, so you also need your directive to update when those values changes.

Here is how you can add observe behavior:

.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
    }
})

Demo: http://plnkr.co/edit/PehccH32xMzlbhsRD0FI?p=info

Upvotes: 1

Related Questions