angular geocoder fails when I use data binding

Question

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?

*"Basically, I have it working fine."*. In what case does it work fine? — dfsq, Dec 03 '15 at 20:40
Can you replicate the issue in demo? I can't, works fine for me. http://plnkr.co/edit/n67DFe?p=preview — dfsq, Dec 03 '15 at 20:52
ok let me try. so basically, what you have done works just fine for me as well. i have a db call to get some information, and one of the attributes is an array called location. For some reason, I can't get this to work when I use binding to pass those values. However, as you can see the values are shown fine when I output them in that span. — user1354934, Dec 03 '15 at 21:01
Ah, so `vm.user.location` is loaded with REST call? Then of course, it will not work, there are no values by the time directive uses them. — dfsq, Dec 03 '15 at 21:03
:( sorry I am still really new to this and I thought it would be cool to try this out. Can you point me in the right direction? What should I do? thanks — user1354934, Dec 03 '15 at 21:06
can i add a $scope.$watch to the directive? is there a way to "wait" — user1354934, Dec 03 '15 at 21:09
You will need to use attrs.$observe. Let me post an example. — dfsq, Dec 03 '15 at 21:21

score 1 · Accepted Answer · answered Dec 03 '15 at 21:22

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

Wow. You are an excellent teacher and very helpful. I love this site because I learn a lot every day. Thank you — user1354934, Dec 03 '15 at 21:25
Now I am going to have to read something like this http://stackoverflow.com/questions/14876112/angularjs-difference-between-the-observe-and-watch-methods to understand more about $observe. I love this journey! — user1354934, Dec 03 '15 at 21:27

angular geocoder fails when I use data binding

1 Answers1