Navbar не скрывается на ng-hide

Question

Я пытаюсь скрыть навигационную панель в зависимости от того, вошел ли пользователь в систему или нет. Но navbar не скрывается, когда я изменяю переменную $scope.loggedIn. Зачем?

Вид:

<nav> 
    <div ng-controller="mainCtrl"> 

    <!-- Logged in --> 
    <div ng-show="loggedIn"> <!-- this one displays all the time --> 
     Navbar logged in 
     <a href="#" ng-click="logout()">Log out</a> 
    </div> 

    <!-- Logged out--> 
    <div ng-hide="loggedIn"> <!-- this one never displays --> 
     Navbar logged out 
     <a href="#" ng-click="login()">Log in</a> 
    </div> 

    </div> 
</nav> 

Контроллер:

.controller('mainCtrl', ['$scope', '$state', 'userService', 
    function($scope, $state, userService) { 
     $scope.loggedIn = userService.isLoggedIn(); 

     // been trying this, but it does not work 
     $scope.$watch('userService.login()', function(newVal) { 
     $scope.loggedIn = newVal; 
     }); 

     $scope.login = function() { 
     userService.login(); 
     $state.go('home'); 
     }; 

     $scope.logout = function() { 
     userService.logout(); 
     $state.go('login'); 
     }; 
    } 
]); 

Услуги:

.factory('userService', ['$http', function($http) { 
    var loggedIn = false; 

    return { 
    isLoggedIn: function() { 
     return loggedIn; 
    }, 
    login: function() { 
     loggedIn = true; 
    }, 
    logout: function() { 
     loggedIn = false; 
    } 
    }; 

}]); 

Answer 1

При создании контроллера вы привязываете булевский примитив к $scope.loggedIn. Это не изменяется при изменении переменной в вашей службе.

Неправильный способ настройки ваших часов. Это может быть сделано, чтобы работать, используя код ниже:

var app = angular.module('app', []); 
 
    
 
app.controller('mainCtrl', ['$scope', 'userService', 
 
    function($scope, userService) { 
 
     $scope.$watch(userService.isLoggedIn, function(newVal) { 
 
     $scope.loggedIn = newVal; 
 
     }); 
 
     
 
     $scope.login = function() { 
 
     userService.login(); 
 
     }; 
 

 
     $scope.logout = function() { 
 
     userService.logout(); 
 
     }; 
 
    } 
 
]); 
 

 
app.factory('userService', ['$http', function($http) { 
 
    var loggedIn = false; 
 

 
    return { 
 
    isLoggedIn: function() { 
 
     return loggedIn; 
 
    }, 
 
    login: function() { 
 
     loggedIn = true; 
 
    }, 
 
    logout: function() { 
 
     loggedIn = false; 
 
    } 
 
    }; 
 

 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
<div ng-app='app'> 
 
    <div ng-controller="mainCtrl"> 
 

 
    <!-- Logged in --> 
 
    <div ng-show="loggedIn"> 
 
     Navbar logged in 
 
     <a href="#" ng-click="logout()">Log out</a> 
 
    </div> 
 

 
    <!-- Logged out--> 
 
    <div ng-hide="loggedIn"> 
 
     Navbar logged out 
 
     <a href="#" ng-click="login()">Log in</a> 
 
    </div> 
 
    </div> 
 
</div>

---

Вы также можете выставить объект пользователя от службы пользователя, который содержит состояние входа пользователя:

var app = angular.module('app', []); 
 

 
app.controller('mainCtrl', ['$scope', 'userService', 
 
    function($scope, userService) { 
 
    $scope.user = userService.user; 
 
    
 
    $scope.login = function() { 
 
     userService.login(); 
 
    }; 
 
    $scope.logout = function() { 
 
     userService.logout(); 
 
    }; 
 
    } 
 
]); 
 

 
app.factory('userService', ['$http', 
 
    function($http) { 
 
    var user = {loggedIn: false}; 
 

 
    return { 
 
     user: user, 
 
     login: function() { 
 
     user.loggedIn = true; 
 
     }, 
 
     logout: function() { 
 
     user.loggedIn = false; 
 
     } 
 
    }; 
 

 
    } 
 
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
<div ng-app='app'> 
 
    <div ng-controller="mainCtrl"> 
 

 
    <!-- Logged in --> 
 
    <div ng-show="user.loggedIn"> 
 
     Navbar logged in 
 
     <a href="#" ng-click="logout()">Log out</a> 
 
    </div> 
 

 
    <!-- Logged out--> 
 
    <div ng-hide="user.loggedIn"> 
 
     Navbar logged out 
 
     <a href="#" ng-click="login()">Log in</a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Вы должны изменить свой код для перенаправления на другую страницу после возвращения вызова метода входа в систему с завода

$scope.login = function() { 
     userService.login().then(function(data){; 
     $state.go('home'); 
     }); 
     };