Currently, I am in the process of developing a new App using Ionic and Angular JS. Specifically, in one of the app tabs, I am utilizing geolocation to populate four fields (street name, street number, latitude, and longitude).
Below is the snippet of my controller JS for this particular tab:
.controller('PetitionsCtrl', function($scope, $cordovaGeolocation, $log) {
var posOptions = {timeout: 10000, enableHighAccuracy: false};
$cordovaGeolocation
.getCurrentPosition(posOptions)
.then(function (position) {
$scope.lat = position.coords.latitude;
$scope.lng = position.coords.longitude;
$log.log($scope.lat);
$log.log($scope.lng);
$scope.pLat = {value: $scope.lat};
$scope.pLng = {value: $scope.lng};
var geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng($scope.lat, $scope.lng);
var request = {
latLng: latlng
};
geocoder.geocode(request, function(data, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (data[0] != null) {
$log.log("Street: " + data[0].address_components[1].long_name);
$log.log("Number: " + data[0].address_components[0].long_name);
$log.log("Locality: " + data[0].address_components[2].long_name);
$log.log("Address: " + data[0].formatted_address);
$scope.pStreet = {value: data[0].address_components[1].long_name};
$scope.pNumber = {value: data[0].address_components[0].long_name};
} else {
$log.log("Address unavailable");
}
}
})
});
})
Here is the HTML section corresponding to the above logic:
<label class="item item-input">
<span class="input-label">Street</span>
<input type="text" ng-model="pStreet.value">
</label>
<label class="item item-input">
<span class="input-label">Number</span>
<input type="text" ng-model="pNumber.value">
</label>
<label class="item item-input">
<span class="input-label">Latitude</span>
<input type="text" ng-model="pLat.value">
</label>
<label class="item item-input">
<span class="input-label">Longitude</span>
<input type="text" ng-model="pLng.value">
</label>
While the console displays all the information correctly using $log, it's peculiar that the input fields for street and number are not populated, even though the values are correct. Strangely enough, switching to another tab and returning populates all the fields accurately. What steps should I take to rectify this issue?