Correctly implementing bindings on object property in an AngularJS directive

Question

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.

Jinder Sidhu · Accepted Answer · 2012-12-07 14:07:56Z

2

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());
                });
            }
        });
    }
 };
});

edited Dec 7, 2012 at 14:07

Jinder Sidhu

1461 silver badge7 bronze badges

answered Nov 12, 2012 at 21:10

Jason Als

7234 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jinder Sidhu Over a year ago

Hi Jason, this answer is nearly, but not quite there. I've updated it to fix it.

Konstantin · Accepted Answer · 2012-11-12 15:59:36Z

0

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() } );

answered Nov 12, 2012 at 15:59

Konstantin

4933 silver badges4 bronze badges

1 Comment

Jinder Sidhu Over a year ago

I'm sorry, but this makes no sense.

Collectives™ on Stack Overflow

Correctly implementing bindings on object property in an AngularJS directive

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related