Angular $scope $watch on service function return value

Question

I've got a service for my websocket connection and this service returns in a function the actual state whether the client is actual connected or not. I've simplified my code and these snippets are a small example of my problem:

myApp.factory('Websocket', function() {
    //the status boolean whether connected or not
    var bool = true;

    //small mock for the status change
    setInterval(function() {
        bool = !bool;
    }, 1000);

    //i've made the value of the status variable accessable in a function or the variable itself
    return {
        status: function() {
            return bool;   
        },
        var: bool
    }
});

Now i tried to apply the status value to my scope in the controller:

myApp.controller('Ctrl', function(Websocket, $scope) {
   //method 1
   $scope.status = Websocket.status();

   //method 2
   $scope.$watch(function() {
     return Websocket.status();
   }, function(newVal) {
     $scope.status = newVal;
   });
});

...but both methods don't work and don't update the $scope variable for this html:

<div ng-app="myApp">
    <div ng-controller="Ctrl">
      method1: {{status}}
    </div>
</div>

This is a codepen: http://codepen.io/anon/pen/bVjaBa?editors=101

Thanks for your help!

Nikos Paraskevopoulos · Accepted Answer · 2015-11-03 10:13:49Z

1

The problem is that any "external" change to data watched by Angular has to call scope.$apply() for the watchers to update (here the watchers are the UI from the {{status}} expression). In the codepen the solution is simple: Make the service depend on the $rootScope and call $rootScope.$apply() in the interval function:

myApp.factory('Websocket', function($rootScope) {
    ...
    setInterval(function() {
        bool = !bool;
        $rootScope.$apply();
    }, 1000);
    ...
});

Something similar has to be done with the real service, key concepts being: (1) you have to call $apply() and (2) having no access to a specific scope, just use the $rootScope.

answered Nov 3, 2015 at 10:13

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

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

2 Comments

Sim Over a year ago

Thanks for your help!

user1364910 Over a year ago

I'd go with $rootScope.$digest right off the bat instead of $apply - as all you're doing is jumping through a try/catch statement to reach the same result. source. Not really costly but, there's no real reason for doing it.

Yaron Schwimmer · Accepted Answer · 2015-11-03 10:40:45Z

1

The problem is as Nikos mentioned: you are changing the variable's value outside of the digest loop, so angular is not following the changes.

Using $scope.$apply is one option, but in this case I would prefer using $interval instead of setInterval.

myApp.factory('Websocket', function($interval) {
  var bool = true;
  $interval(function() {
    bool = !bool;
  }, 1000);

  return {
    status: function() {
        return bool;   
    },
    var: bool
  }
});

See it working here.

edited Nov 3, 2015 at 10:40

answered Nov 3, 2015 at 10:22

Yaron Schwimmer

5,3675 gold badges40 silver badges60 bronze badges

1 Comment

Sim Over a year ago

Thanks for your help!

Collectives™ on Stack Overflow

Angular $scope $watch on service function return value

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related