Angular JS アプリにヘッダー/フッターを実装しようとしています。これらをメインのindex.htmlにng-includeとして追加することを考えていました。ただし、ヘッダーとフッターが静的ページである場合、これは機能します。私の場合は少し異なります...ログインページにヘッダー/フッターが表示されません。ログインしているかどうかに応じて、他のページでは「Welcome user [ logout] 」または「Welcome guest [ login ]」を表示する必要があります。
ログイン情報と isLoggedIn をサービスに保存し、HeaderCtrl コントローラーを使用してそれを $scope にコピーします。最大の問題は、ログオフ時に ng-include 全体が更新されないことです。したがって、ng-show hide ディレクティブを含む div は、変更時に非表示/表示されません。誰かが ng-switch の使用を提案しました - それも同じように動作します。
ヘッダー コードを個々のビュー内に移動すると、すべて問題ありません。
同様の質問がここにあります: angularjs AngularJS でヘッダー ページを更新する - ヘッダーやフッターなどの繰り返されるフラグメントを処理する
以前にこの質問をしましたが、ログに記録された変数を rootScope から移動したときに、答えが役に立ちませんでした。問題は、私の HeaderCtrl がページ全体の更新でのみ実行されていることです。Angular ページ ナビゲーションなどでは実行されません。
コードは次のとおりです: index.html:
<body ng-app="greenhornApp">
<div id="navbar" ng-controller="HeaderCtrl"><div ng-include src="'views/partials/header.html'"></div>
</div>
<div class="title-spacer visible-desktop"></div>
<!-- Add your site or application content here -->
<div class="wrapper" ng-view></div>
</body>
header.js:
angular.module('greenhornApp')
.controller('HeaderCtrl', ['$scope', 'LoginService', function ($scope, loginService) {
$scope.isLoggedIn = loginService.isLoggedIn();
$scope.session = loginService.getSession();
}]);
header.html
<div>
<div ng-show="isLoggedIn">
<div class="navbar navbar-inverse navbar-fixed-top">
More stuff here....
</div>
</div>
</div>
私は ng-route と angular 1.2.0-rc3 を使用しています。HeaderCtrl にブレークポイントを設定しました... ページ全体を更新した場合にのみ実行されます。ここで何が間違っていますか？