I'm doing a mobile app using AngularJS. What I'm trying to achieve is to update the geolocation data as soon as I turn on the GPS. How do I achieve this? The problem I'm facing is, in order for the data to be updated I have to navigate to other page. These are the codes. I'm sharing data from one controller to the other.
.factory('sharedProperties', function () {
var coordinates = {};
var getC = function () {
return coordinates;
};
var setC = function (value) {
coordinates = value;
return coordinates;
};
return {
getCoords: getC,
setCoords: setC
};
})
First Controller
.controller('MessageController', ['$scope', 'sharedProperties', function ($scope, sharedProperties) {
var nObj = sharedProperties.getCoords();
console.log(nObj);
$scope.message = "This is my location: " + nObj.lat + ", " + nObj.lng + ". I'm around " + nObj.acc + " meters from point.";
}])
Second Controller
.controller("mainController", ['$scope', 'sharedProperties', function ($scope, sharedProperties) {
$scope.lat = "0";
$scope.lng = "0";
$scope.accuracy = "0";
$scope.error = "";
$scope.model = {
myMap: undefined
};
$scope.myMarkers = [];
$scope.showResult = function () {
return $scope.error == "";
}
$scope.mapOptions = {
center: new google.maps.LatLng($scope.lat, $scope.lng),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
$scope.showPosition = function (position) {
$scope.lat = position.coords.latitude;
$scope.lng = position.coords.longitude;
$scope.accuracy = position.coords.accuracy;
$scope.$apply();
sharedProperties.setCoords({
'lat': position.coords.latitude,
'lng': position.coords.longitude,
'acc': position.coords.accuracy
});
var latlng = new google.maps.LatLng($scope.lat, $scope.lng);
$scope.model.myMap.setCenter(latlng);
$scope.myMarkers.push(new google.maps.Marker({
map: $scope.model.myMap,
position: latlng,
title: 'You are here'
}));
}
$scope.showMarkerInfo = function (marker) {
$scope.myInfoWindow.open($scope.model.myMap, marker);
};
$scope.showError = function (error) {
switch (error.code) {
case error.PERMISSION_DENIED:
$scope.error = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
$scope.error = "Location information is unavailable."
break;
case error.TIMEOUT:
$scope.error = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
$scope.error = "An unknown error occurred."
break;
}
$scope.$apply();
}
$scope.getLocation = function () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition($scope.showPosition, $scope.showError,
{ enableHighAccuracy: true});
} else {
$scope.error = "Geolocation is not supported by this browser.";
}
}
$scope.getLocation();
}])
EDIT:
Somehow I managed to get it to work like this.
.controller('MessageController', ['$scope', 'sharedProperties', function ($scope, sharedProperties) {
$scope.getLoc = function () {
var nObj = sharedProperties.getCoords();
console.log(nObj);
var numbers = [nObj.lat, nObj.lng, nObj.acc];
return "This is my location: " + numbers[0].toFixed(6) + ", " + numbers[1].toFixed(6) + ". I'm around " + numbers[2].toFixed(0) + " meters from point.";
}])
And in the view, I put it like this.
<textarea style="width: 100%; height: 183px;" placeholder="Message">{{getLoc()}}</textarea>
but it displays the {{getLoc()}} in the textarea. Is there anyway that I can hide this and show only when it gets the data?
You may use ng-bind-html
So it will be like
<textarea style="width: 100%; height: 183px;" placeholder="Message" ng-bind-html="getLoc()"></textarea>