Question

我有一个用户可以登录的应用程序。登录后，视图分为2 - 信息栏和主要部分。主要部分通过ng-view更新。当没有登录信息时，使用ng-show隐藏信息栏，然后在登录后显示。目前它在未登录时被隐藏，但登录时没有显示。如果你看下面的控制器，我希望成功登录时loginStatus.loggedIn等于用户名，因此应该调用ng-show。或者我弄错了？

代码简述：

的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);
});

修改的

Here's the Plunker

AngularJS $范围值未更新

0 个答案: