angularjs ng-show：成功登錄后顯示菜單

Question

我試圖在用戶成功登錄后顯示導航欄。 但是即使用戶登錄后，導航欄仍處於隱藏狀態。這是index.html的一部分

    <header id="Header1" data-ng-controller="navigationController">
        <!-- Navigation bar -->


        <nav class="navbar navbar-inverse" id="nav1" ng-hide="isConnected">
            <div class="collapse navbar-collapse">


                <ul id="Ul1" class="nav navbar-nav" style="color: white; font-weight: bolder; font-family: Arial; border-radius: 5px;">

                    <!-- <li class="nav navbar-brand" id="Li1" style="padding: 0px 0px 0px 0px;">
                    <img src="favicon.ico" height="20" width="20" />
                </li>-->


                    <li id="Li2" data-ng-class="{'active':isActive('/home')}">
                        <a data-original-title="Home page." class="disable-click" href="#/home">Home</a>
                    </li>

                    <li data-ng-class="{'active':isActive('/demo')}">
                        <a data-original-title="Demonstration page." class="disable-click" href="#/demo">Demonstration</a>
                    </li>

                </ul>
            </div> 
        </nav>
    </header>

控制器navigationController.js是

'use strict';
 app.controller('navigationController',
function ($scope, $location, $rootScope, AuthenticationService) {
    debugger;
    $scope.isActive = function (path) {
        return $location.path().substr(0, path.length) == path;
    };

        $scope.isConnected = !($rootScope.globals.currentUser);

    console.log($scope.isConnected);
});

我將當前用戶存儲在此服務中

 service.SetCredentials = function (username, password) {
        var authdata = Base64.encode(username + ':' + password);

        $rootScope.globals = {
            currentUser: {
                username: username,
                authdata: authdata
            }
        };

        $http.defaults.headers.common['Authorization'] = 'Basic ' + authdata; 
        $cookieStore.put('globals', $rootScope.globals);
    };

登錄后，綁定不起作用，除非當我刷新菜單時顯示（當cookie已滿時）。 任何解決方案請

Answer 1

實例化控制器時，僅對isConnected屬性進行一次評估。 當用戶登錄時，沒有什么可以重新評估isConnected

您可以設置這樣的手表來重新評估它：

'use strict';
app.controller('navigationController',
function ($scope, $location, $rootScope, AuthenticationService) {
    debugger;
    $scope.isActive = function (path) {
        return $location.path().substr(0, path.length) == path;
    };

    $rootScope.$watch('globals', function(newVal, oldVal) {
            $scope.isConnected = !($rootScope.globals.currentUser);
    }, true);
});

請注意，您可能可以直接將手表添加到$ scope而不是$ rootScope，因為應該典型地繼承globals屬性，盡管我還沒有對此進行測試來驗證

Answer 2

嘗試這個

'use strict';
 app.controller('navigationController',
function ($scope, $location, $rootScope, AuthenticationService) {
    ...

    $scope.isConnected = function() {
        return !($rootScope.globals.currentUser);
    };
});

並且不要將ng-hide的值更改為ng-hide="isConnected()" ，將其保留為ng-hide="isConnected"

<nav class="navbar navbar-inverse" id="nav1" ng-hide="isConnected">
    ...