Ng-Show With Cookies

Question

I am trying to set the ng-show variable isloggedout with the cookie Value, which is working (therefore the $scope.isloggedout is either true or false) which should trigger the ng-show or ng-hide which is clearly not working.

My App controller:

app.controller('projectCtrl', ['$scope', '$http', '$location', '$cookies', '$cookieStore', '$window',
function($scope, $http ,$location,$cookies,$cookieStore,$windows)   {
    $scope.isloggedout = $cookieStore.get('value');
}]);

My HTML:

<html ng-app="rjtApp" ng-controller="projectCtrl">
    <div >
    <ul class="nav navbar-nav navbar-right"  >
    <li><a href="#Signout" >Login <span class="glyphicon glyphicon-user"  ng-show="isloggedout"></span></a></li>
    <li><a href="#Login" >LogOut <span class="glyphicon glyphicon-user" ng-show="!isloggedout"></span></a></li></ul>
    </div>
</html>

any help?

is there any reason why there isn't a body tag in your html code? — Gianmarco, Dec 09 '15 at 18:32

score 1 · Answer 1 · answered Dec 09 '15 at 18:47

I tried your code and I can't well understand why you are doing so, using the ng-show directive only in the span. I can think that you want to either show or hide one button so I adapted your html:

<html ng-app="rjtApp" ng-controller="projectCtrl">
<body>
    <div>
        <ul class="nav navbar-nav navbar-right">
            <li ng-show="isloggedout"><a href="#Signout">Login <span class="glyphicon glyphicon-user"></span></a></li>
            <li ng-hide="isloggedout"><a href="#Login">LogOut <span class="glyphicon glyphicon-user"></span></a></li>
        </ul>
    </div>

<!-- You will need to import here your angular.js file and your personal js files. -->
</body>
</html>

I will also advice you to confine the var inside the controller so that you won't dirt the scope. The controller will be:

app.controller('projectCtrl', ['$scope', '$http', '$location', '$cookies', '$cookieStore', '$window', function($scope, $http ,$location,$cookies,$cookieStore,$windows)   {
    var self = this;
    self.isloggedout = $cookieStore.get('value');
}]);

and the HTML:

<html ng-app="rjtApp" ng-controller="projectCtrl as pc">
<body>
    <div>
        <ul class="nav navbar-nav navbar-right">
            <li ng-show="pc.isloggedout"><a href="#Signout">Login <span class="glyphicon glyphicon-user"></span></a></li>
            <li ng-hide="pc.isloggedout"><a href="#Login">LogOut <span class="glyphicon glyphicon-user"></span></a></li>
        </ul>
    </div>

<!-- You will need to import here your angular.js file and your personal js files. -->
</body>
</html>

Ng-Show With Cookies

1 Answers1