I set the boolean to true after the user logs in, and I want to update the status of the login button to log out. I tried using ng-show, but apparently did not work.
States:
myApp.config(function ($stateProvider, $urlRouterProvider) { // default route $urlRouterProvider.otherwise("/Home"); var header = { templateUrl: 'commonViews/Header.html', controller: function ($scope) { } }; var footer = { templateUrl: 'commonViews/Footer.html', controller: function ($scope) { } }; // ui router states $stateProvider .state('Home', { url: "/Home", views: { header: header, content: { templateUrl: 'views/HomePage.html', controller: function ($scope) { } }, footer: footer } }) .state('LoggedIn', { url: "/LoggedIn", views: { 'header': header, 'content': { templateUrl: 'views/LoggedIn.html', controller: function ($scope) { } }, 'footer': footer } }); });
UserService:
myApp.factory('UserService', function ($http, $localStorage, AuthenticationService) { return { logIn: function (email, password) { return $http.post('rs/loginResource/login', {email: email, password: password}) .then(function (data) { AuthenticationService.isLogged = true; alert("Authentication loggedIn inside login controller: " + AuthenticationService.isLogged); return data; }) .catch(function (error) { console.log(error); }); }, logOut: function () { if (AuthenticationService.isLogged) { AuthenticationService.isLogged = false; delete $localStorage.token; } } }; }); myApp.factory('AuthenticationService', function () { var auth = { isLogged: false }; return auth; });
Input controller:
myApp.controller('loginController', ['$scope', '$http', 'jwtHelper', '$localStorage', '$sessionStorage', '$state', '$window', 'UserService', 'AuthenticationService', function ($scope, $http, jwtHelper, $localStorage, $sessionStorage, $state, $window, UserService, AuthenticationService) { $scope.token = ""; $scope.$storage = $localStorage; $scope.loginForm = function (email, password) { if (email !== undefined && password !== undefined) { UserService.logIn(email, password).then(function (response) { $localStorage.token = response.data.token; if ($localStorage.token) { $state.go('LoggedIn'); alert("scope loggedIn inside login controller: " + AuthenticationService.isLogged); } }).catch(function (status, data) { console.log(status); console.log(data); }); } $scope.logout = function logout() { UserService.logOut().success(function () { $state.go('/'); }).error(function (status, data) { console.log(status); console.log(data); }); }; }; }]);
index.html
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head></head> <body> <div ui-view="header"></div> <div ui-view="content"></div> <div ui-view="footer"></div> </body> </html>
Html header:
<nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" ng-show="isLoggedIn" ng-click="logout()"><b>Logout</b></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown" ng-show="!isLoggedIn"><b>Login</b> <span class="caret"></span></a> <ul id="login-dp" class="dropdown-menu"> <li> <div class="row"> <div class="col-md-12"> <form class="form" role="form" method="post" ng-controller="loginController" ng-submit="loginForm(email, password)" accept-charset="UTF-8" id="login-nav"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label> <input type="email" class="form-control" ng-model="email" id="exampleInputEmail2" placeholder="Email address" required> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" ng-model="password" placeholder="Password" required> <div class="help-block text-right"><a href="">Forget the password ?</a></div> </div> <div class="form-group"> <button type="submit" class="btn btn-primary btn-block">Sign in</button> </div> </form> </div> </div> </li> </ul> </li> </ul> </div> </div> </nav>
After the user has logged in, he will change the status for logging out within a second and then will return to the login state. I'm not sure what is going wrong?