The code for displaying the logout button is as follows:
<li class="dropdown" data-ng-if="userName">
<a href class="dropdown-toggle clear" data-toggle="dropdown" data-ng-show="userName">
</a>
<!-- dropdown -->
<ul class="dropdown-menu>
<li ng-hide="fb_id">
<a ui-sref="app.changePassword">Change Password</a>
</li>
<li>
<a ui-sref="app.changeProfilePic">Change Profile Picture</a>
</li>
<li data-ng-show="userName">
<a ui-sref="access.signout" data-ng-if="userName">Logout</a>
</li>
</ul>
<!-- / dropdown -->
</li>
Here's the functionality in the controller:
$scope.logIn = function (user) {
$scope.myPromise = AuthService.login({
'uid': user.email,
'password': user.password,
}).then(function (response) {
$localStorage.userName = response.userName;
$scope.userName = $localStorage.userName;
}, function (error) {
$scope.authError = true;
});
};
For signing out, this is the controller implementation:
$scope.userName = "";
delete $localStorage.userName;
$rootScope.userName = "";
Regardless of whether ng-if or ng-show is used, the issue remains with the visibility of the logout button and dropdown.