使用UI路由器爲了實現根據用戶是否已登錄而變化的導航欄/標題

Question

我有一個導航欄模板，用於根據用戶是否登錄進行調整和更改。

我有所有其他國家繼承了root狀態，並通過假設用戶所有國家繼承了authenticated狀態記錄在

我root狀態：

.state('root', { 
    abstract: true, 
    template: '<ui-view />' 
    data: { 
     requiresLogin: false 
    }, 
    views: { 
     'header@': { 
      //Issue: navbarCtrl is not defined here... 
      templateUrl: 'app/navbar/views/navbar.view.html' 
     }, 
     'footer@': { 
      templateUrl: 'app/footer/views/footer.html' 
     } 
    } 
}) 

和我authenticated狀態：

.state('authenticated', { 
    abstract: true, 
    parent: 'root', 
    views: { 
     'header@': { 
      controller: 'NavbarCtrl', 
      templateUrl: 'app/navbar/views/navbar.view.html' 
     } 
    }, 
    data: { 
     requiresLogin: true 
    }, 
    resolve: { 
     currentUserAccount: ['domainService', function (domainService) { 
      return domainService.currentUserAccount(); 
     }] 
    } 
}) 

現在的問題是，我需要我的root狀態navbarCtrl但如果因爲控制器依賴於獲得數據的用戶沒有登錄該控制器將不會有工作時，在用戶登錄：

.controller('NavbarCtrl', ['$scope', '$interval', 'messageService', 'currentUserAccount', function ($scope, $interval, messageService, currentUserAccount) { 

    $scope.currentUserAccount = currentUserAccount.data; 
    ... 

這裏也是我的導航欄的模板：

<!-- Collect the nav links, forms, and other content for toggling --> 
<div class="collapse navbar-collapse" id="navmenu" collapse="isCollapsed"> 
    <!--if user is not connected--> 
    <ul ng-if="!authenticated" class="nav navbar-nav navbar-right"> 
     <li><a href="#">Fonctionnalités</a></li> 
     <li><a href="#">À propos</a></li> 
     <li><a href="#">Contact</a></li> 
     <li><a class="btnNav btn btn-primary" role="button" ui-sref="signup.form" href="#">S'inscrire</a></li> 
    </ul> 
    <!--if user is connected--> 
    <ul ng-if="authenticated" class="nav navbar-nav navbar-right"> 
     <li ng-if="messageCount"><a ui-sref="message" href="#"><span style="font-size:16px;" class="glyphicon icon-email NewMail" aria-hidden="true"></span> {{messageCount}}</a></li> 
     <li class="visible-xs"><a ui-sref="dashboard.useraccount.summary" href="#">Mon compte</a></li> 
     <li class="visible-xs" ng-controller="SignoutCtrl"><a ng-click="signout()" href="#">Se déconnecter</a></li> 
     <li class="hidden-xs"> 
      <section class="btn-group" dropdown> 
       <button type="button" class="btn btn-link" id="dropdown" dropdown-toggle> 
        <img ng-if="currentUserAccount.userAccountType==='PARENTS_TYPE'" src="assets/media/img/parents.svg" width="46" height="46" class="img-circle"> 
        <img ng-if="currentUserAccount.userAccountType==='CHILDCARE_WORKER_TYPE'" src="assets/media/img/professionel.svg" width="46" height="46" class="img-circle"> 
        {{currentUserAccount.firstName}} 
        <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown"> 
        <li><a ui-sref="dashboard.useraccount.summary" href="#"><span class="glyphicon icon-settings" aria-hidden="true"></span> Mon compte</a></li> 
        <li ng-controller="SignoutCtrl"> 
         <a ng-click="signout()" href="#"><span class="glyphicon icon-lock" aria-hidden="true"></span> {{'SIGNOUT' | translate}}</a> 
        </li> 
       </ul> 
      </section> 
     </li> 
    </ul> 
</div> 

所以我不知道如何與我的導航欄的問題繼續進行。我正在考慮檢查是否在NavbarCtrl內定義了$rootScope.authenticated，但它看起來不正確。

Answer 1

您的頭控制器應該處於祖先根抽象狀態，並且您要處理的動態功能（即，如果用戶未登錄，因爲控制器依賴於用戶登錄時獲得的數據）應該在其中處理。您可以通過頭域控制器中的ng-show/ng-hide通過域變量狀態來處理2個頭模板（即通過登錄和不登錄）。換句話說，頭控制器的編寫方式應該是在不進行身份驗證的情況下，它應該返回不帶登錄頭的身份驗證，並且應該將身份驗證寫入登錄頭後。