Angular Service and Controller common scope

Question

I have AuthService and want to use this service in some controllers.

I want to show or hide "log out" button in my front-end, depends on $scope.isLoggedIn.

My front-end code:

<md-button ng-if="isLoggedIn" class="md-button" ng-click="signOut()" aria-label="Logout">
    Logout
</md-button>

and my signOut() function:

$scope.signOut = function() {
    AuthenticationService.signOut().then(function() {
        $location.path('/');
    });
};

Authentication service contains functions: signIn(), signOut() and field .isLoggedIn = true|false.

And I want to update my variable in controller, $scope.isLoggedIn depends on AuthenticationService.isLoggedIn. But if I try this:

$scope.isLoggedIn = AuthenticationService.isLoggedIn

it works OK, but only when I load site. So if user is logged in, variable $scope.isLoggedIn is true and if user isn't logged in variable $scope.isLoggedIn is false.

But if AuthenticationService.isLoggedIn change while application runs it doesn't change $scope.isLoggedIn.

Is it possible to keep this reference between service and controller? Or should I do this in another way?

DerekMT12 · Accepted Answer · 2016-02-15 16:57:21Z

3

You'll have to do:

$scope.authService = AuthenticationService;

And in your view, access it by:

authService.isLoggedIn

The reason your current way isn't working is because you're setting a boolean initially, a value type, not a reference type like an object. So when isLoggedIn is updated, your scope variable doesn't know. When you set it to an object, in your case AuthenticationService, the reference to that object is maintained, and any updates are reflected in the view.

answered Feb 15, 2016 at 16:57

DerekMT12

1,35911 silver badges15 bronze badges

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

Comments

Sandeep · Accepted Answer · 2016-02-15 17:01:46Z

1

use also $watch in controller

$scope.$watch(function(){return AuthenticationService.isLoggedIn}, function(newval, oldval){
   $scope.isLoggedIn = newval;
});

answered Feb 15, 2016 at 17:01

Sandeep

1,4791 gold badge13 silver badges27 bronze badges

1 Comment

DerekMT12 Over a year ago

This will work, but it is a bad practice. You don't need to use $watch to accomplish this.

Okyere Adu-Gyamfi · Accepted Answer · 2016-02-15 17:08:12Z

1

Simply make this into a function:

$scope.isLoggedIn

$scope.isLoggedIn = function(){ return AuthenticationService.isLoggedIn;}

answered Feb 15, 2016 at 17:08

Okyere Adu-Gyamfi

214 bronze badges

Collectives™ on Stack Overflow

Angular Service and Controller common scope

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related