current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I have created an AngularJS directive to wrap a Geocomplete plugin for Google Maps Autocomplete. I'm trying to make it bind to a property of the scope, which is specified by adding a 'geocomplete' attribute to an existing element. 

    geocompleteModule.directive("geocomplete", function ($log, $timeout, $compile, $controller) {
        return {
            restrict: 'A',
            priority: 200,
            link: function (scope, element, attrs, ctrl) {
                var autocomplete = $(element).geocomplete().bind("geocode:result", function (event, result) {
                    if(result.geometry && result.geometry.location) {
                        var location = result.geometry.location;
                        scope.$apply(function (s) {
                            s[attrs.geocomplete] = new Models.Point(location.lat(), location.lng());
                        });
                    }
                });
            }
        };
    });

However, if the property referred to in the geocomplete attribute is a sub-property, this won't work. For example:

<input geocomplete="location" />

Works.

<input geocomplete="search.location" />

Will not work.

Natively, AngularJS seems to be able to do this with its own bindings, but how would I go about implementing this myself?

Edit

I know how this can be done using a split and for loop, but presumably this isn't the "proper" way.

share|improve this question
add comment

2 Answers

up vote 1 down vote accepted

Just two changes I can see for your directive. Added scope, binding any value on the geocomplete attribute to 'location' then use s[scope.location] in your scope.$apply

Directive documentation: http://docs.angularjs.org/guide/directive

geocompleteModule.directive("geocomplete", function ($log, $timeout, $compile, $controller) {
 return {
    restrict: 'A',
    scope:{
      location:'=geocomplete'  
    },
    priority: 200,
    link: function (scope, element, attrs) {
        var autocomplete = $(element).geocomplete().bind("geocode:result", function (event, result) {
            if(result.geometry && result.geometry.location) {
                var location = result.geometry.location;
                $timeout(function() {
                    scope.location = new Models.Point(location.lat(), location.lng());
                });
            }
        });
    }
 };
});
share|improve this answer
    
Hi Jason, this answer is nearly, but not quite there. I've updated it to fix it. –  Jinder Sidhu Nov 13 '12 at 12:16
add comment
up vote 0 down vote 
s[attrs.geocomplete] = new Models.Point(location.lat(), location.lng());

Replace like:

var a = function(){};
var s = [];

s.push( { 'attr' : 'aaa.bbb', 'method' : new a() } );
share|improve this answer
    
I'm sorry, but this makes no sense. –  Jinder Sidhu Nov 12 '12 at 16:03
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.