AngularJS - ヘッダーとフッターのような繰り返しフラグメントの処理

Question

私はAngular JS Appでヘッダー/フッターを実装しようとしています。私はこれらをindex.htmlのメインにng-includeとして追加しようと考えていました。しかし、ヘッダーとフッターが静的なページであれば、これはうまくいきました。私のケースは若干異なります...ログインページにヘッダー/フッターは表示されません。あなたがログインしているかどうかに応じて、「ようこそユーザー[ログアウト]」または「ようこそゲスト[ログイン]」を表示する必要があります。

ログイン情報をrootScopeに保存し、ログイン時にブール値$ rootScope.isLoggedInを設定します。最大の問題は、ng-include全体がログオフ時にリフレッシュされないということです。したがって、ng-show hideディレクティブを持つdivは、変更時に非表示/表示されません。誰かがng-switchを使って提案しました - 同じように動作します。

個々のビュー内でヘッダーコードを移動すると、すべて正常です。

同様の問題はここにある：Refresh header page in angularjs

Answer 1

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テンプレート。だから、全体のマークアップがshowHeaderスコープ変数に応じて、隠されている

<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> 

： - テンプレートは以下のように（除去され、無関係な細部のアカウントにあなたのニーズを取って）だろう。メニューを動的に作成します（menuEntries）。 userData.loggedInに応じて、適切なログイン/ログアウトメッセージ。