AngularJS $watch root scope variable for changes

Question

I have the following $rootScope variable which I use to save the current logged in user privilege level, then I access this variable from other controllers. Is there a way I can watch the rootScope variable for changes in order to update controllers specific variables with any changes to the root scope variable? Below is the code I am using so far, can someone please tell me what I am doing wrong and how to fix it? Thanks

In app.js under .run:

 $rootScope.uPLevel = 0;

.controller

   $scope.$watch($rootScope.uPLevel, function() {
            $scope.userPLevel = $rootScope.uPLevel;
   }, true);

SomeKittens · Accepted Answer · 2014-03-29 23:57:10Z

64

The first parameter to $watch should either be a string or a function (docs). Right now you're passing it the value of $rootScope.uPLevel on controller initialization.

$scope.$watch(function() {
  return $rootScope.uPLevel;
}, function() {
  $scope.userPLevel = $rootScope.uPLevel;
}, true);

Two sidenotes:

It may be prudent to store this value in a service instead of $rootScope.
If uPLevel is only an integer (as your example suggests) then you don't need to pass true as the third parameter - that's only for arrays and objects. If you do want to watch a collection, then I suggest using $watchCollection instead.

answered Mar 29, 2014 at 23:57

SomeKittens

39.6k19 gold badges117 silver badges145 bronze badges

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

5 Comments

MChan Over a year ago

Thanks a lot, reason I am using it in rootScope as I need a way to have it accessible from all services / controllers application wide. Do you believe having this variable inside a service is much better? if yes can you please explain why?

SomeKittens Over a year ago

@MChan It's generally a bad idea to clutter up $rootScope for the same reasons one doesn't attach lots of variables to window. Something to think about. Don't forget to upvote!

Brocco Over a year ago

@SomeKittensUx2666 is right that you should resist putting things on $rootScope, in this case I would suggest that you broadcast an event from $rootScope which all controllers/services could listen to in order to handle the change logic.

Irshu Over a year ago

or you could use a single object and store all data inside it. this way you don't clutter the $rootScope

RoboBear Over a year ago

Plus one more vote because if you have a dynamic value to watch that is not isolated well in a specific scope, even if it's on the $window, this is a good way to go.

Subodh Ghulaxe · Accepted Answer · 2015-12-24 13:42:39Z

30

I recommend watching $rootScope variables like that:

$scope.$watch('$root.uPLevel', function() {
    $scope.userPLevel = $rootScope.uPLevel;
});

This way, When current directive/controller is destroyed. It clears the watch as well. In $rootScope.$watch case, the watch stays forever.

edited Dec 24, 2015 at 13:42

Subodh Ghulaxe

18.7k15 gold badges87 silver badges103 bronze badges

answered Dec 13, 2015 at 16:34

nir

3,1603 gold badges23 silver badges19 bronze badges

1 Comment

msaad Over a year ago

Great idea. Perfect if you're looking for performance optimization

Collectives™ on Stack Overflow

AngularJS $watch root scope variable for changes

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related