AngularJS ng-view佈局管理

Question

嗨我正在使用angularjs的項目。 我roting邏輯是

.state("authenticate", { 
     url: '/', 
     templateUrl : "views/login.html", 
     controller : "LoginCtrl", 
     data : { 
      requireLogin : false 
     } 
    }) 
    .state("beats", { 
     url: '/beats', 
     templateUrl : "views/beats.html", 
     controller : "BeatsCtrl", 
     data : { 
      requireLogin : true 
     } 
    }) 

.state("outlets", { 
     url: '/outlets', 
     templateUrl : "views/beats.html", 
     controller : "BeatsCtrl", 
     data : { 
      requireLogin : true 
     } 
    }) 

我有ng-view在index.html，其包括第一login.html（URL '/'）。在每個州登錄後，我想在每個模板中使用ng-include來包含navbar。

目前我在每一頁寫這行

<div ng-include=" 'templates/navbar.html' "></div> 

，但我想只有一次包括每個視圖應該呈現它下面。但問題是這個navbar模板本身在ng-view中呈現。 ，據我所知，我們不能在一個應用程序中有多個ng-view。

任何人都可以請告訴我什麼應該是這樣做的最佳方法。

Answer 1

您可能會將此導航欄包含在index.html本身中，但使用ng-if或ng-show將其隱藏，直到用戶登錄。一旦用戶登錄，您可以擁有一個評估標誌爲true，並且此導航欄可以出現在每個後續頁面上。

index.html中

<div id="navbar" ng-if="isUserLoggedIn"> 
    // nav bar code 
</div> 

而這個 'isUserLoggedIn'

將通過在範圍的LoginCtrl設置爲true。