CODEWITHSUNDEEP
angularjs
Oliv
Oliv

Reputation: 13

angularjs : html header refresh after loggedin

I'd like to have a different header in my index.html (loggedout) and my home page (loggedin). I've tried many solution but my header never refresh. I always need to reload the page to make it work.

index.html 

<div id="header" ng-controller="HeaderCtrl as head">
  <div ng-show="head.loggedIn" class="header">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#/">Home</a></li>
      <li><a ng-href="#/about">About</a></li>
      <li><a ng-click="head.logout()">Logout</a></li>
    </ul>
  </div>

  <div ng-show="head.loggedOut" class="header">
    <ul class="nav navbar-nav">
      <li><a ng-click="head.login()">Home</a></li>
      <li><a ng-href="#/register">Sign in</a></li>
    </ul>
  </div>
</div>

<div class="container">
   <div ng-view=""></div>
</div>

<div class="footer">
   <div class="container"></div>
</div>

app.js
var app = angular.module('plunker', []);

app.controller('HeaderCtrl', function($scope) {
   var head = this;
   head.logout = logout;
   head.loggedIn = 'false';
   head.loggedOut = !head.loggedIn;

   function logout(){
     head.loggedIn ="false";
     head.loggedOut = 'true';
    }

    function logint(){
      head.loggedIn ="false";
      head.loggedOut = 'true';
    }
});

Here is my simply code on Plunker
http://plnkr.co/edit/byNHePeJskAdQbPvFWLp?p=preview

Any solution to manage different header/footer with a loggedIn var ?

Upvotes: 1

Views: 786

Answers (1)

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

Use without ""

try to use as boolean instead of string

like this

head.loggedIn =false;

PLUNKR

Upvotes: 1

Related Questions