I have an application where a user can login. Once logged in the view is divided into 2 - infobar and the main section. The main section gets updated via ng-view. When not logged in infobar is hidden from view using ng-show then shown once logged in. Currently it is hidden as desired when not logged in, but it is not showing when logged in. If you look at the controller, below, I expect that on successful login that loginStatus.loggedIn to equal the username, therefore truthy, which should invoke ng-show. Or have I got it wrong?
The code in brief:
index.html
<body ng-controller="LoginStatus_control" ng-cloak>
<div ng-show="loginStatus.loggedIn" class="infobar">
You are logged in as {{username}}
<button type="button" ng-click="logoutUser()">Logout</button>
</div>
<div class="main">
<div ng-view></div>
</div>
</body>
app.js
userApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/angular-app/app/', {templateUrl: 'partials/login_part.html'}).
when('/angular-app/app/overview', {templateUrl: 'partials/overview_part.html', controller: 'Admin_control'}).
when('/angular-app/app/users', {templateUrl: 'partials/users_part.html', controller: 'Users_control'}).
otherwise({redirectTo: '/angular-app/app/'});
$locationProvider.html5Mode(true);
}]);
userApp.factory('OAuth', ['$http', '$location', function($http, $location) {
return {
login: function(rememberCheck, username) {
if( rememberCheck === true ) {
localStorage.loggedin = username;
} else {
sessionStorage.loggedin = username;
}
$location.path('/angular-app/app/overview');
},
logout: function() {
localStorage.loggedin = null;
sessionStorage.loggedin = null;
$location.path('/angular-app/app/');
},
isLoggedIn: function() {
if( (sessionStorage.loggedin !== 'null') || (localStorage.loggedin !== 'null') ) {
if( sessionStorage.loggedin ) {
return sessionStorage.loggedin;
}
else {
return localStorage.loggedin;
}
} else {
return false;
}
}
};
}]);
controllers.js
userApp.controller( 'LoginStatus_control', function( $scope, $rootScope, $route, OAuth ) {
var user = OAuth.isLoggedIn();
$scope.loginStatus = {
loggedIn: user
}
console.log($scope.loginStatus.loggedIn);
});
EDIT