I'll preface this with the fact that I really have no idea if this is the best way to achieve what I'm doing and I'm very open to better suggestions.
I've got a user account system using OAUTH2
which gets looks up user info in my database and saves it as a variable, $rootScope.userInfo
. This resides in a controller which is appended to my app's body
; here I was thinking that the highest-level controller would load before those that live within it, but apparently not.
If I load a view which tries to access this $rootScope.userInfo
object before my mainCtrl
has had a chance to load it in from my database, it throws a javascript error and Angular
breaks.
For reference, here's a rough idea of the template:
<body ng-controller="mainCtrl">
<header>Content</header>
<div class='main-view' ng-controller="userProfile">
<p>{{user.name}}</p>
<p>{{user.email}}</p>
</div>
</body>
I'm loading $rootScope.userInfo
in mainCtrl
like this:
$http.get('/api/users/' + $cookies.id).
success(function(data) {
$rootScope.userInfo = data.user[0];
console.log("User info is:");
console.log($rootScope.userInfo);
$scope.status = 'ready';
});
Then for my userProfile
control, I do:
function userProfile($scope, $cookies, $http, $routeParams, $rootScope){
if($scope.status == 'ready'){
$scope.user = $rootScope.userInfo;
console.log("Double checking user info, here it is:");
console.log($rootScope.userInfo);
}
}
If I'm coming from a different page in the app which doesn't call on $rootScope.userInfo
, the API has enough time to look it up and my userProfile
page works fine. However if doing a full-page refresh, the $rootScope.userInfo
doesn't have time to load and I get errors.
How can I fix this?