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

我試圖在用戶成功登錄後顯示導航欄。但導航欄在用戶登錄後，仍然隱藏着均勻。這裏是index.html的一部分angularjs ng-show：成功登錄後顯示菜單

<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變滿時）。任何解決方案請

來源

2015-05-12 AtefB

這是因爲你的控制器運行第一和未更新。當您設置cookie並且用戶通過身份驗證時，您可以觸發事件，控制器可以偵聽並更新「isConnected」。你可以使用'$ scope。$ on'和'$ rootScope。$ broadcast'。 – GillesC

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

注意到它可能是可能的，你可以直接添加監視至$範圍，而不是$ rootScope作爲全局屬性應prototypically繼承，雖然我沒有測試，以驗證

來源

2015-05-12 13:17:41 milks

謝謝你現在的作品！ – AtefB

試試這個

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

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

不改NG-隱藏價值ng-hide="isConnected()"，保持它作爲ng-hide="isConnected"

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

來源

2015-05-12 13:30:57

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

回答

相關問題