javascript - Angular无法自动更新

我写了一个带有导航栏的角度项目，我希望导航栏可以在用户登录后自动更新，所以我用ng-show和ng-hide来控制它，但事实是没有用，什么我可不可以做？我写错了代码吗？我不知道您能理解我的问题，因为我是中国人，而英语却很差。

<nav class="navbar navbar-default" role="navigation" ng-controller="UserCtrl">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
               data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" ui-sref="index">许愿墙{{username}}</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a ui-sref="index">首页</a></li>
                <li ng-hide="isLogined"><a ui-sref="user.login">登录</a></li>
                <li ng-show="isLogined"><a ui-sref="user.info">个人中心</a></li>
                <li ng-show="isLogined"><a ui-sref="user.wish">我的愿望</a></li>
                <li ng-show="sex == 'female'"><a ui-sref="user.putwish">许愿</a></li>
                <li ng-show="isLogined"><a ng-click='doLogout()'>注销</a></li>
            </ul>
        </div>
</nav>

<div class="container-fluid" ui-view>

</div>

这是我的控制器的代码：

app.controller('UserCtrl', ['$scope', '$state', 'LogoutService', function($scope, $state, LogoutService) {
if(sessionStorage.getItem('username')) {
    $scope.isLogined = true;
    $scope.username = sessionStorage.getItem('username');
    if(sessionStorage.getItem('sex') == 'male') {
        $scope.sex = 'male';
    } else {
        $scope.sex = 'female';
    }
} else {
    $scope.isLogined = false;
}

$scope.doLogout = function() {
    LogoutService.doLogout();
    sessionStorage.removeItem('username');
    sessionStorage.removeItem('sex');
    $state.go('index');
};
}]);
app.controller('LoginCtrl', ['$scope', '$state', 'LoginService', function($scope, $state, LoginService) {
$scope.doLogin = function() {
    var data = {
        username: $scope.username,
        password: $scope.password
    };
    LoginService.doLogin(data)
        .success(function(data, status){
            if(status === 200) {
                sessionStorage.setItem('username', data.user.username);
                sessionStorage.setItem('sex', data.user.sex);
                $state.go('index');
            }
        });
};
}]);

最佳答案

检查此线程：How to $watch state change of $stateProvider in AngularJS?

创建一个路由更改事件处理程序，并在路由更改时，在UserCtrl控制器中调用一个函数以检查当前登录状态。

因此，组织代码如下：

app.controller('UserCtrl', ['$scope', '$state', '$rootScope', 'LogoutService',
    function($scope, $state, $rootScope, LogoutService) {
        var updateLoginState = function() {
            if (sessionStorage.getItem('username')) {
                $scope.isLogined = true;
                $scope.username = sessionStorage.getItem('username');
                if (sessionStorage.getItem('sex') == 'male') {
                    $scope.sex = 'male';
                } else {
                    $scope.sex = 'female';
                }
            } else {
                $scope.isLogined = false;
            }
        };
        $scope.doLogout = function() {
            LogoutService.doLogout();
            sessionStorage.removeItem('username');
            sessionStorage.removeItem('sex');
            $state.go('index');
        };
        //Initially, check the login state when controller initializes
        updateLoginState();
        //Listen to route change and check login state again when route changes
        $rootScope.$on('$stateChangeStart', function() {
            updateLoginState();
        })
    }
]);