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?