0

I'm trying to hide and show menu items based on a value stored inside of a service. It's a qnd Session-Service that logs the user in, based on an accessToken stored in $cookies.accessToken:

app.service('Session', function ($cookies, $location) {
  var Session = {
    isLoggedIn: !! $cookies.accessToken,
    accessToken: $cookies.accessToken,

    login: function (token, redirectTo) {
      this.accessToken = token;
      this.isLoggedIn = true;

      if (redirectTo) {
        $location.path(redirectTo);
      }
    },
    logout: function () {
      this.accessToken = false;
      this.isLoggedIn = false;
    }
  };

  if (Session.accessToken) {
    Session.login(Session.accessToken)
  }

  return Session;
});

I currently have 3 controllers and use the ngView directive to show the appropriate partials. However, as you can imagine, I don't want either the "log out" or the "auth" link to show up:

  <div class="container">
    <nav>
      <ul class="nav nav-tabs">
        <li><a href="#/public">public</a></li>
        <li><a href="#/logout">log out</a></li>
        <li><a href="#/auth">auth</a></li>
      </ul>
    </nav>

    <div ng-view></div>
  </div>

I tried ng-hide="Session.isLoggedIn" but that didn't work out. So what's the right way to do what I'm trying to do?

nocksock
  • 5,369
  • 6
  • 38
  • 63

0 Answers0