AngularJS: Bind angular service property to scope

Question

Scenario

I have a service UserService that maintains the (boolean) sessionStatus of the user.
The view conditionally shows [LOGOUT] on ng-show=sessionStatus (i.e. if not logged in (false), no show).
sessionStatus of ViewController should therefore always match that of UserService ... right?
If you click [LOGOUT] when it's visible, it does some loggy outty things, sessionStatus value changes, and view should update with new outcome of ng-show....

Problem

Currently, clicking logout does not seem to update var UserService.sessionStatus?
How do I keep $scope.sessionStatus updated when UserService.logout() occurs and changes UserService.sessionStatus?
- How do I map the changing $scope to ng-show?

Files

View

    <a ng-show="sessionStatus" ng-click="logout()">Logout</a>

ViewController

    app.controller('AppController', function($scope, $interval, $http, UserService) {
      $scope.logout = function() { UserService.logout(); }

      // This ain't working
      $scope.$watch(UserService.sessionStatus, function() {
          $scope.sessionStatus = UserService.sessionStatus;
      });
    });

UserService

NB: appUser is an injected global var in the HTML head (a hacky fix until I get session/cookie stuff working properly)

  app.factory('UserService', function($http) {
    var pre;
    var sessionStatus;

    function init() {                   // Logged in  : Logged out             
      pre = appUser.user != undefined ? appUser.user  : { name: 'Logged out', uid: '0' };
      sessionStatus = pre.uid != "0"  ? true          : false;
    }

    function resetSession() { appUser = null; init(); }

    init();

    return {
      sessionStatus: function() { return sessionStatus; }, // update on change!

      logout: function() {
        $http.get("/logout").then(function (data, status, headers, config) {
          resetSession();
        })
      }
    };
  });

Just a suggestion, not asking you to change the requirements. But you should always keep showing the Logout link better don't hide and show. Still if you want to achieve that functionality then use $timeout and may be set timeout interval to 5 secs. In that timeout code call a service that will check if session is valid or not and update the scope variable accordingly. But for every 5 secs u wud be calling your server so keep that in mind. — Coder John
– Coder John, Commented Oct 13, 2014 at 16:00

Matt · Accepted Answer · 2016-04-01 17:42:04Z

9

Instead of a watch, simply use a scoped function that returns the session status from the service.

$scope.sessionStatus = function() {
    return userService.sessionStatus();
};

Your Logout link would look as below:

<a ng-show="sessionStatus()" ng-click="logout()">Logout</a>

A stripped down Plunker for your functionality: http://plnkr.co/edit/u9mjQvdsvuSYTKMEfUwR?p=preview

edited Apr 1, 2016 at 17:42

Matt

9,51112 gold badges70 silver badges87 bronze badges

answered Oct 13, 2014 at 16:12

Angad

3,4293 gold badges33 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

yellow-saint Over a year ago

Oh wow, a very elegant solution. Does Angular constantly run that function to check for changed values automatically or something?

Tobbe Over a year ago

Why is it that it doesn't work to just do $scope.sessionStatus = userService.sessionStatus;

Lev Over a year ago

How come the view won't refresh live if we change sessionStatus to : function(){return Date.now();} plnkr.co/edit/rW4Q7OMSzqVrk9fSBBsE?p=preview. I would expect seeing the milliseconds ticking.

Matt · Accepted Answer · 2016-04-01 17:40:54Z

2

Using a scoped function is cleaner and is the "correct" way to do it. Yet, for the sake of completeness you could also have fixed your watch:

$scope.$watch(function () {
    return UserService.sessionStatus;
}, function() {
    $scope.sessionStatus = UserService.sessionStatus;
});

The first argument of the $watch method takes a WatchExpression which can be a string or a method.

But again, $watch should not be used in controllers. Using scoped methods as suggested are cleaner and easier to test.

edited Apr 1, 2016 at 17:40

Matt

9,51112 gold badges70 silver badges87 bronze badges

answered Oct 13, 2014 at 22:11

bengro

1,02411 silver badges20 bronze badges

Collectives™ on Stack Overflow

AngularJS: Bind angular service property to scope

Scenario

Problem

Files

View

ViewController

UserService

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Scenario

Problem

Files

View

ViewController

UserService

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related