Обработка верхних и нижних колонтитулов в AngularJS

Я пытаюсь реализовать верхний/нижний колонтитул в приложении Angular JS. Я думал добавить их как ng-include в основной index.html. Однако это сработало бы, если верхний и нижний колонтитулы являются статическими страницами. Мой случай немного отличается... На странице входа нет заголовка/нижнего колонтитула. Другие страницы в зависимости от того, вошли ли вы в систему или нет, вы должны показать "Приветственный пользователь [logout]" или "Welcome guest [login]".

Я сохраняю данные для входа и isLoggedIn в службе, а затем используйте контроллер HeaderCtrl для копирования в $scope. Самая большая проблема заключается в том, что весь ng-include не обновляется при выходе из системы. Следовательно, divs с ng-show hide директивы не будут скрывать/показывать при изменении. Кто-то предложил использовать 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... он запускается только тогда, когда я полностью обновляю страницу. Что я здесь делаю неправильно?

ОТВЕТЫ

Ответ 1

Если ваш loginService.isLoggedIn() привязан к примитивному значению вместо объекта, ваш HeaderCtrl должен использовать $watch для наблюдения за переменной и получения нового значения по мере ее изменения.

Чтобы он работал без $watch, вам необходимо убедиться, что ссылка на объект передается с вашего loginService на ваш HeaderCtrl.

Я сделал два быстрых Plunkers, которые, как мы надеемся, достаточно хорошо отражают вашу ситуацию, чтобы дать некоторые рекомендации:

С примитивным и $watch: http://plnkr.co/edit/LvtVEE?p=preview

С ссылкой на объект и $watch: http://plnkr.co/edit/2u2ZDE?p=preview

Ответ 2

EDIT: Мои оригинальные рассуждения были неправильными. Ответьте tasseKATT на это.

Вот еще один способ связи между контроллерами, использующими механизм раскрутки angularJS

Здесь jsfiddle, чтобы показать основную идею.

var module = angular.module("demo", []);

function Header ($scope){

   $scope.userIsLoggedIn = true

   $scope.$on('DO_LOGOUT',function(event){
    alert('Header is updating log-status')
    $scope.userIsLoggedIn=false
   })
}
function Dynamic($scope){

 $scope.logout =function(){
    $scope.$emit('LOGOUT_REQUESTED')
  }
}

function Root($scope) {

$scope.$on('LOGOUT_REQUESTED',function(event){
    alert('Rootscope got logout event')
    $scope.$broadcast('DO_LOGOUT')
})   
}