My goal is to utilize meteor angular js ui-router resolve to fetch information of a user selected from a user list.
$stateProvider
.state('userprofile', {
url: '/user/:userId',
cache: false,
template: '<user-profile userinfo="$resolve.userinfo"></user-profile>',
controller: UserProfile,
controllerAs: name,
resolve: {
userinfo: function($stateParams) {
viewedUser = Meteor.users.findOne({
_id: $stateParams.userId
});
return viewedUser;
},
}
});
The issue is that, upon the initial load from the user list, the user profile displays correctly. However, upon page reload, the userinfo becomes undefined. My assumption is that on subsequent loads, the controller is already loaded before the resolve is completed?!
After some research, I experimented with $q and $timeout
resolve: {
userinfo: function($stateParams, $q, $timeout) {
deferred = $q.defer();
$timeout(function() {
deferred.resolve(Meteor.users.findOne({
_id: $stateParams.userId
}));
}, 1000);
return deferred.promise;
},
}
As expected, this approach works and the user profile is displayed every time I refresh the page. However, when I reduce the delay to 500, it goes back to being undefined upon refresh. I'm not certain why, in this scenario, a longer delay works?
Thank you!