AngularJS - 處理重複的片段，如頁眉和頁腳

我一直在嘗試在Angular JS App中實現頁眉/頁腳。我正在考慮在主index.html中將這些添加爲ng-include。然而，如果頁眉和頁腳是靜態頁面，這將會起作用。我的情況稍有不同...在登錄頁面中沒有顯示頁眉/頁腳。其他頁面取決於您是否登錄，您必須顯示「歡迎用戶[註銷]」或「歡迎來賓[登錄]」。AngularJS - 處理重複的片段，如頁眉和頁腳

我將登錄信息保存在rootScope中，並在登錄時設置一個布爾值$ rootScope.isLoggedIn。最大的問題似乎是整個ng-include在註銷時沒有刷新。因此，使用ng-show hide指令的div不會隱藏/顯示更改。有人建議使用ng-switch - 它的行爲方式也是一樣的。

如果我在各個視圖中移動標題代碼，那麼一切都很好。

類似的問題是在這裏：Refresh header page in angularjs

來源

2013-10-10 Hari Gangadharan

它取決於使用什麼表達式來改變\隱藏div，你是否在觀察某些屬性等。爲頭部及其綁定表達式提供一些代碼模板。 – Chandermani

您可以使用ng-controller指令爲頁眉/頁腳提供一個訪問您的$ rootScope的控制器並添加一些隱藏/顯示邏輯？ – ivarni

順便說一句，把東西放在$ rootScope中相當於全局的「普通」javascript，而不是一個很好的做法，我建議使用服務來存儲您的「isLoggedIn」。 – ivarni

在頁眉/頁腳使用的控制器，如ivarni建議。從我自己的（實驗）的應用程序的例子：

在index.html的，報頭將顯示動態生成的菜單，登錄/退出等：

<div id="navbar" class="navbar navbar-inverse navbar-fixed-top" 
    x-ng-controller="NavbarCtrl" x-ng-include="'app/main/navbar.html'"></div>

的NavbarCtrl建立適當的範圍爲app/main/navbar.html模板。該模板將是如下（考慮到您的需求 - 以及不相關的細節刪除）：

<div class="navbar-inner" x-ng-if="showHeader"> 
    <div class="container"> 
     <div> 
      <ul class="nav"> 
       <li x-ng-repeat="menuEntry in menuEntries"> 
        <a x-ng-href="#{{menuEntry.path}}">{{menuEntry.display}}</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
    <div x-ng-if="userData.loggedIn"> 
     Wellcome {{userData.userName}}! 
     <a x-ng-click="logout()">Logout</a> 
    </div> 
    <div x-ng-if="!userData.loggedIn"> 
     <a x-ng-click="login()">Login</a> 
    </div> 
</div>

所以整個標記是取決於showHeader範圍變量隱藏。它動態地創建菜單（menuEntries）。並取決於userData.loggedIn，適當的登錄/註銷消息。

來源

2013-10-10 07:23:17

謝謝。我不知道發生了什麼事。我編碼幾乎相同，但沒有工作......終於放棄了。然後回來再來 - 一切都很好！ –

再次從rootScope移動isLoggedIn後，它不工作！問題已更新... –

您是否可以在小提琴中重新創建問題？這是唯一的幫助。 –

AngularJS - 處理重複的片段，如頁眉和頁腳

回答

相關問題