1

I am using Angularjs in a project.

For login logout I am setting a scope variable like below:

$scope.showButton = MyAuthService.isAuthenticated();

In markup its like

<li ng-show="showLogout"><a href="#/logout" ng-click="logOut()">Logout</a></li>

When I logout it redirect to the login page but logout menu doesn't disappear.

Also tried like this:

$scope.showButton = MyAuthService.isAuthenticated();

In markup:

<li ng-class=" showLogout ? 'showLogout' : 'hideLogOut' "><a href="#/logout" ng-click="logOut()">Logout</a></li> 

Seems scope change is not reflecting in my view, but when I reload page "logout menu" disappears as expected.

I also tried with directives like below:

MyApp.directive('logoutbutton', function(MyAuthService) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs, controller) {
            attrs.$observe('logoutbutton', function() {
                updateCSS();
            });

            function updateCSS() {
                if (MyAuthService.isAuthorized()) {
                    element.css('display', 'inline');
                } else {
                    element.css('display', 'none');
                }
            }


        }
    }
});

No luck with that too.

How can I hide it when the logout is successful and also after successful login how can I show "logout button"?

2
  • Did you mean to set showButton to the function, perhaps? Use $scope.showButton = MyAuthService.isAuthenticated; in JS and <foo ng-show="showLogout()">...</foo>. Aug 26, 2013 at 17:24
  • I want sth like change for $scope.isAuthenticated = true; will change my view instantly.
    – arnold
    Aug 26, 2013 at 17:26

2 Answers 2

6

Setup a watch on MyAuthService.isAuthenticated() and when that fires, set your scope variable to the result of that service call. In your first example, the scope variable is only getting set once when the controller is initialized (I am assuming that's where it is being run). You can set the watch up in the controller or, if you want to use a directive, in the directive link function.

Something like this:

$scope.$watch(MyAuthService.isAuthenticated, function(newVal, oldVal){
   $scope.showButton = newVal;
});
2
  • FYI, you can simplify the $watch as follows: $scope.$watch(MyAuthService.isAuthenticated, function(...) { ... }); Aug 26, 2013 at 19:20
  • Sure. I took Miguel's plunkr and forked it - plnkr.co/edit/KGUGCF?p=preview
    – BoxerBucks
    Aug 27, 2013 at 20:58
0

Edit: After read the MarkRajcok comment I realized that this solution is coupling view from business logic layer, also it exposes the service variable to be changed outside the service logic, this is undesirable and error prone, so the $scope.$watch solution proposed by BoxerBucks it's probably better, sorry.

You can use $scope.$watch as in the BoxerBucks answer, but I think that using watchers isn't proper for services, because usually you want to access services variables in differents controllers expecting that when you change that services variables, all the controllers that inject that service will be automatically updated, so I believe that this is a good way to solve your problem:

In your MyAuthServices do this:

app.service('MyAuthService', function(...){
    var MyAuthServiceObj = this;

    this.authenticated=false; // this is a boolean that will be modified by the following methods:

    // I supose that you have methods similar to these ones
    this.authenticateUser(...){
        ...
        // At some point you set the authenticated var to true
        MyAuthServiceObj.authenticated = true;
    }

    this.logout(){
        ....
        // At some point you set the authenticated var to false
        MyAuthServiceObj.authenticated = false;
    }

});

Then in your controller do this:

$scope.myAuthService = MyAuthService;

finally in your html:

ng-show="myAuthService.authenticated"

And this should work without using a watcher like in BoxerBucks answer.

Check this excellent video about AngularJS providers, to understand how to use services properly.

6
  • Yea, that's a more elegant solution than a manual watch. I'll be updating some of my code :)
    – BoxerBucks
    Aug 26, 2013 at 18:49
  • @miguel I am already using services as you mentioned but it is not working(I have mentioned that it my question like $scope.showButton = MyAuthService.isAuthenticated();) . Are you sure that the sudo code you gave above is right?
    – arnold
    Aug 26, 2013 at 19:21
  • 2
    @BoxerBucks, although it may appear more elegant, this approach couples the view with the service. A view should only know about its controller's $scope properties, not about service properties. I prefer the $watch approach that you have in your answer. Aug 26, 2013 at 19:24
  • @arnold, check this plunk plnkr.co/edit/r3K3Qs?p=preview this was taken from the AngularJS video I mentioned Aug 26, 2013 at 20:02
  • @MarkRajcok that's a good point, but then, why Wes Alvaro (the presenter of this video youtube.com/watch?v=VxuN6WO3tIA ) share that plunker as an example of how to use services for cross app/controller comunications as in this slide slides.wesalvaro.com/20121113/#/2/3 Do you think that this is a bad practice? Aug 26, 2013 at 20:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.