I am trying to update $scope.location
using directive which uses google map api to get locations. But when I select a location it is not getting updated in $scope.location
. I also want to call blu
and foc
function on blur and focus of input field.
angular.module('testApp', ['ionic', 'ion-google-place'])
.controller('MyController', function($scope, $ionicModal) {
$scope.name="bb";
$scope.centerOnMe = function()
{
$scope.change_location =
$scope.location
}
$scope.location = "empty";
$scope.foc = function()
{
$scope.msg = "focus called";
}
$scope.blu = function()
{
console.log('Blur called');
$scope.msg = "blur called" ;
}
})
angular.module('ion-google-place', [])
.directive('ionGooglePlace', [
'$ionicTemplateLoader',
'$ionicBackdrop',
'$ionicPlatform',
'$q',
'$timeout',
'$rootScope',
'$document',
function($ionicTemplateLoader, $ionicBackdrop, $ionicPlatform, $q, $timeout, $rootScope, $document) {
return {
require: 'ngModel',
restrict: 'AE',
template: '<input type="text" readonly="readonly" class="ion-google-place" autocomplete="off" ng-change="centerOnMe()">',
replace: true,
/*scope: {
ngModel: '=?'
},*/
link: function(scope, element, attrs, ngModelCtrl) {
var unbindBackButtonAction;
scope.locations = [];
var geocoder = new google.maps.Geocoder();
var searchEventTimeout = undefined;
var POPUP_TPL = [
'<div class="ion-google-place-container">',
'<div class="bar bar-header item-input-inset">',
'<label class="item-input-wrapper">',
'<i class="icon ion-ios7-search placeholder-icon"></i>',
'<input class="google-place-search" type="search" ng-focus="foc()" ng-blur="blu()" ng-model="searchQuery" placeholder="' + (attrs.searchPlaceholder || 'Enter an address, place or ZIP code') + '">',
'</label>',
'<button class="button button-clear">',
attrs.labelCancel || 'Cancel',
'</button>',
'</div>',
'<ion-content class="has-header has-header">',
'<ion-list>',
'<ion-item ng-repeat="location in locations" type="item-text-wrap" ng-click="selectLocation(location)">',
'{{location.formatted_address}}',
'</ion-item>',
'</ion-list>',
'</ion-content>',
'</div>'
].join('');
var popupPromise = $ionicTemplateLoader.compile({
template: POPUP_TPL,
scope: scope,
appendTo: $document[0].body
});
popupPromise.then(function(el){
var searchInputElement = angular.element(el.element.find('input'));
scope.selectLocation = function(location){
ngModelCtrl.$setViewValue(location);
ngModelCtrl.$render();
el.element.css('display', 'none');
$ionicBackdrop.release();
if (unbindBackButtonAction) {
unbindBackButtonAction();
unbindBackButtonAction = null;
}
};
scope.$watch('searchQuery', function(query){
if (searchEventTimeout) $timeout.cancel(searchEventTimeout);
searchEventTimeout = $timeout(function() {
if(!query) return;
if(query.length < 3);
var req = scope.geocodeOptions || {};
req.address = query;
geocoder.geocode(req, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
scope.$apply(function(){
scope.locations = results;
});
} else {
// @TODO: Figure out what to do when the geocoding fails
}
});
}, 350); // we're throttling the input by 350ms to be nice to google's API
});
var onClick = function(e){
e.preventDefault();
e.stopPropagation();
$ionicBackdrop.retain();
unbindBackButtonAction = $ionicPlatform.registerBackButtonAction(closeOnBackButton, 250);
el.element.css('display', 'block');
searchInputElement[0].focus();
setTimeout(function(){
searchInputElement[0].focus();
},0);
};
var onCancel = function(e){
scope.searchQuery = '';
$ionicBackdrop.release();
el.element.css('display', 'none');
if (unbindBackButtonAction){
unbindBackButtonAction();
unbindBackButtonAction = null;
}
};
closeOnBackButton = function(e){
e.preventDefault();
el.element.css('display', 'none');
$ionicBackdrop.release();
if (unbindBackButtonAction){
unbindBackButtonAction();
unbindBackButtonAction = null;
}
}
element.bind('click', onClick);
element.bind('touchend', onClick);
el.element.find('button').bind('click', onCancel);
});
if(attrs.placeholder){
element.attr('placeholder', attrs.placeholder);
}
ngModelCtrl.$formatters.unshift(function (modelValue) {
if (!modelValue) return '';
return modelValue;
});
ngModelCtrl.$parsers.unshift(function (viewValue) {
return viewValue;
});
ngModelCtrl.$render = function(){
if(!ngModelCtrl.$viewValue){
element.val('');
} else {
element.val(ngModelCtrl.$viewValue.formatted_address || '');
}
};
scope.$on("$destroy", function(){
if (unbindBackButtonAction){
unbindBackButtonAction();
unbindBackButtonAction = null;
}
});
}
};
}
]);
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
.ion-google-place-container{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 20;
display: none;
}
input.ion-google-place[readonly]{
background-color: transparent;
cursor: text;
}
<link href="http://code.ionicframework.com/1.0.0-beta.13/css/ionic.css" rel="stylesheet"/>
<script src="http://code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<div><div ng-app="testApp">
<div >
<ion-content ng-controller="MyController" class="padding">
<ion-google-place placeholder="Enter an address, Apt# and ZIP" ng-model="location" />
<br>
<br>
{{change_location}}
<br>
<br>
{{location}}
<br>
<br>
{{msg}}
</ion-content>
</div>
</div></div>