Upon user login, the following code is executed:
var promise = UserFactory.doLogin(userCredentials);
promise.success(function (data, status) {
//set localstorage variables
//retrieve additional data only upon successful login
var anotherPromise = UserDataFactory.getUserData();
anotherPromise.success(function (data, status){
if(data.code == 2){
$rootScope.userHead = true;
}
});
The value of $rootScope.userHead dictates whether a sub-menu is shown or hidden. The related HTML snippet for the sub-menu looks like this:
<div class="panel panel-default text-center" style="text-align: center;" ng-hide="userHeader">The menu page is included in various pages using
<div id="submenu" ng-include="'submenu.html'" ></div> .when('/user', {
templateUrl: 'user.html',
controller: 'userController',
animation: 'second',
access: {
requiredLogin: true
}
})
//user.html includes menu with ng-include="'submenu.html'"
After loading the user page, $rootScope.userHead retains its value and the sub-menu remains hidden. However, upon refreshing the page, $rootScope.userHead becomes undefined and the submenu becomes visible.
Is there a reason why $rootScope.userHead loses its value when navigating to another page? Shouldn't it maintain its value?
I'm struggling to identify the issue here. Any insights on how to resolve this would be greatly appreciated.
Thank you.