How to create angularjs custom directive for google location - angularjs

Question

I'm trying to create a directive to lookup google locations using <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=places&language=en-US"></script> like this:
angular.module('MyApp').directive('locationPicker', function () {
return {
restrict: 'AE',
replace: true,
require: 'ngModel',
template: '<input id="{{id}}" type="text" class="{{class}}" placeholder="{{placeholder}}" />',
scope: {
id: '#',
class: '#',
placeholder: '#',
},
link: function ($scope, elm, attrs, controller) {
var autocomplete = new google.maps.places.Autocomplete(elm[0], {types: ['geocode']});
var componentForm = {
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name'
};
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lng();
var name = "";
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
if (name !== "") {
name += ", ";
}
var val = place.address_components[i][componentForm[addressType]];
name += val;
}
}
elm[0].value = name;
$scope.$apply(function () {
controller.$setViewValue({name: name, lat: lat, lng: lng});
});
});
}
};
});
And my input:
<input id="location" location-picker ng-model="location" class="form-control" placeholder="Project location" ng-required="true" />
In my controller:
$scope.location = {
name:null,
lat:null,
lng:null
};
Everything looks fine but when my component is first rendered, the value of the input is [Object object] instead of the place holder (Project Location).
What am I doing wrong?

Answer 1

Problem
You are binding ngModel to the location object, which renders as [object Object] when coerced to a string.
Solution
Since you are grabbing hold of the NgModelController in your directive, you can use its $formatters pipeline to transform the model value (location object with name, lat, lng properties) into the view value and the $render function to specify how to render the value if it is changed outside of the ngModel lifecycle.
Here is a working plunker: http://plnkr.co/edit/5HPFelbDFUrzeccGfgYx?p=preview. The crucial piece of code is
// triggered by $setViewValue
controller.$formatters.push(function (value) {
return value ? value.name : value;
});
// triggered by clear() from controller
controller.$render = function () {
input.value = controller.$modelValue.name;
};
I have also made the following modifications to your code:
Used location-picker as an element directive. input is not a good choice of element since it already has bindings to ngModel.
Removed replace: true. It is a deprecated configuration option in directives, and can cause some strange behaviors, since it tries to mix attributes of directive element and attributes of template element.
Removed elm[0].value = name;. This is handled by the lifecycle of the ngModel when you call $setViewValue.