Question

我用导航栏写了一个角度项目，我想导航栏可以在用户登录时自动更新，所以我使用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');
            }
        });
};
}]);

Answer 1

检查此帖子：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();
        })
    }
]);

Answer 2

最简单的方法是将isLogined变量更改为函数：

$scope.isLogined = function() { return sessionStorage.getItem('username') !== null; }

然后在你看来：

<li ng-hide="isLogined()">

然后做类似于性别测试的事情

Angular无法自动更新

2 个答案: