Handling header and footer in AngularJS

Question

I have been trying to implement the header / footer in an Angular JS App. I was thinking of adding these as ng-include in the main index.html. However this would have worked if the header and footer are static pages. My case is slightly different... In Login page no header / footer is shown. Other pages depending on whether you are logged in or not, you have to show "Welcome user [ logout] " or "Welcome guest [ login ]".

I save the login information and isLoggedIn in a service - then use HeaderCtrl controller to copy that to $scope. The biggest problem seems to be that the whole ng-include is not refreshed on a logoff. Hence divs with ng-show hide directives will not hide/show on change. Somebody suggested using ng-switch - it also behaves the same way.

If I move the header code inside individual views then everything is fine.

A similar question is here: Refresh header page in angularjs AngularJS - Handle repeated fragments like Header and Footer

I have asked this question earlier but the answers did not help me when I moved the logged variable from the rootScope. The problem is my HeaderCtrl is only executing on a full page refresh. Not executing on Angular page navigation etc.

Here is the code: 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>

I am using ng-route and angular 1.2.0-rc3. I put a breakpoint in HeaderCtrl... it gets executed only when I do a full page refresh. What am I doing wrong here?

tasseKATT · Accepted Answer · 2013-10-20 10:29:31Z

19

If your loginService.isLoggedIn() is bound to a primitive value instead of an object, your HeaderCtrl needs to use $watch to monitor the variable and get the new value as it changes.

For it to work without a $watch you need to make sure an object reference is passed from your loginService to your HeaderCtrl.

I made two quick Plunkers that hopefully replicates your situation well enough to give some guidance:

With primitive and $watch: http://plnkr.co/edit/LvtVEE?p=preview

With object reference and no $watch: http://plnkr.co/edit/2u2ZDE?p=preview

answered Oct 20, 2013 at 10:29

tasseKATT

38.5k8 gold badges87 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Hari Gangadharan Over a year ago

Yesterday I ended up doing just that... adding watch on a broadcast and updating the model. I was feeling that the HeaderCtrl will be executed on all page navigations but it is not the case. Thanks anyway.

Lèse majesté Over a year ago

Can you include the pertinent sections of code in your answer in case plnkr.co ever goes down?

mylord Over a year ago

Currently I use $rootScope.myFoo instead of more angularjs advanced ways involving factory, service, provider. Besider global namespace pollution, what’s the downside?

jklingler Over a year ago

You have an unused </div>-Tag on line 13 in both of your solutions.

Mikael P · Accepted Answer · 2013-10-20 11:33:40Z

2

EDIT: My original reasoning was wrong. Check tasseKATT's answer for that.

Here's is another way of communicating between controllers using angularJS broacasting mechanism

Here's a jsfiddle just to show the basic idea.

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')
})   
}

edited Oct 20, 2013 at 11:33

answered Oct 20, 2013 at 9:40

Mikael P

535 bronze badges

Collectives™ on Stack Overflow

Handling header and footer in AngularJS

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related