I am facing an issue where I need to resolve a promise in a state provider so that I can use the results of the promise in another promise.
I am a bit unsure about how to go about this. I tried the following approach:
app
.config(['$stateProvider','GeolocationService',
function($stateProvider,geolocation){
$stateProvider.state('sendCoords',{
resolve: {
long: function (geolocation) {
geolocation().then(function (position) {
return position.coords.longitude;
}, function (reason) {
return false;
})
},
lat: function (geolocation) {
geolocation().then(function (position) {
return position.coords.longitude;
}, function (reason) {
return false;
})
}
},
controller: 'appCtrl'
})
}
]);
However, I am not sure if this implementation is correct. I want the geolocation to be resolved first and then use the 'lat' and 'long' variables in my controller.
app.controller('appCtrl',['$scope','serviceTest',function($scope,serviceTest,lat,long){
$scope.optionsToChoose = [];
serviceTest.options(long,lat).then(
function (option) {
$scope.optionsToChoose = option;
},
function(error){
}
);
}]
When I try to inject lat and long like this, they end up being undefined. I am aware that I have made some mistake, but I am struggling to identify it. Any help would be greatly appreciated.
EDIT: Here is the Geolocation Service Code
app.factory("GeolocationService", ['$q', '$window', '$rootScope',
function ($q, $window, $rootScope) {
return function () {
var deferred = $q.defer();
if (!$window.navigator) {
$rootScope.$apply(function() {
deferred.reject(new Error("Geolocation is not supported"));
});
} else {
$window.navigator.geolocation.getCurrentPosition(function (position) {
$rootScope.$apply(function() {
deferred.resolve(position);
});
}, function (error) {
$rootScope.$apply(function() {
deferred.reject(error);
});
});
}
return deferred.promise;
}
}]);