Auto-updating scope variables in angularjs

Question

I'm currently playing with AngularJS. I'd like to return, from a service, a variable that will let the scope know when it has changed.

To illustrate this, have a look at the example from www.angularjs.org, "Wire up a backend". Roughly, we can see the following:

var projects = $firebase(new Firebase("http://projects.firebase.io"));
$scope.projects = projects;

After this, all updates made to the projects object (through updates, be it locally or remotely) will be automatically reflected on the view that the scope is bound to.

How can I achieve the same in my project? In my case, I want to return a "self-updating" variable from a service.

var inbox = inboxService.inboxForUser("fred");
$scope.inbox = inbox;

What mechanisms let the $scope know that it should update?

EDIT: In response to the suggestions, I tried a basic example. My controller:

$scope.auto = {
    value: 0
};

setInterval(function () {
    $scope.auto.value += 1;
    console.log($scope.auto.value);
}, 1000);

And, somewhere in my view:

<span>{{auto.value}}</span>

Still, it only displays 0. What am I doing wrong ?

Ilan Frumer · Accepted Answer · 2014-02-04 22:34:52Z

10

UPDATE:

I made a demo plunker: http://plnkr.co/edit/dmu5ucEztpfFwsletrYW?p=preview
I use $timeout to fake updates.

The trick is to use plain javascript references:

You need to pass an object to the scope.
You mustn't override that object, just update or extend it.
If you do override it, you lose the "binding".
If you use $http it will trigger a digest for you.
So, whenever a change occurs, the scope variable reference to same object that gets updated in the service, and all the watchers will be notified with a digest.
AFAIK, That's how $firebase & Restangular work.
If you do multiple updates you need to have a way of resetting properties.
Since you hold a reference to an object across the application, you need to be aware of memory leaks.

For example:

Service:

app.factory('inboxService', function($http){

  return {
    inboxForUser: function(user){

      var inbox = {};

      $http.get('/api/user/' + user).then(function(response){
        angular.extend(inbox, response.data);
      })

      return inbox; 
    }
  };
});

Controller:

app.controller('ctrl', function(inboxService){
  $scope.inbox = inboxService.inboxForUser("fred");
});

edited Feb 4, 2014 at 22:34

answered Feb 4, 2014 at 20:50

Ilan Frumer

32.4k8 gold badges73 silver badges84 bronze badges

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

7 Comments

aspyct Over a year ago

Thanks for this. I tried to apply your solution (update the object) as illustrated in my edited question, but couldn't get it to work. Any idea?

Ilan Frumer Over a year ago

@Antoine_935 can you share a plunker so I'll take a look?

aspyct Over a year ago

Hmmm. Making this plunker made me realise that I should probably use $timeout instead for this example. Alright then, it should work :) plnkr.co/edit/OWjMT9hWCn4ujjCnc7eQ?p=preview Thanks for showing me plunker btw, didn't know it!

aspyct Over a year ago

But then, should I call $digest myself? (as maybe no one will in my case). How should I call it, if I don't have a scope at hand? Not sure I want to call it on the $rootScope, it may be heavy.

Ilan Frumer Over a year ago

Even if you trigger $apply on any scope it would always trigger a digest on the $rootScope anyway. That's a know issue and the angular team is currently working on a solution.

|

dnc253 · Accepted Answer · 2014-02-04 20:48:53Z

4

It depends on how the object is updating. If it gets updated "within" angular, a digest cycle will be triggered (See http://docs.angularjs.org/guide/scope), and the view will update automatically. That is the beauty of Angular.

If the object gets updated "outside" of angular (e.g. a jQuery plugin), then you can manually trigger a digest cycle by wrapping the code that's doing the updating in an $apply function. Something like this:

$scope.$apply(function() {
    //my non angular code
});

See http://docs.angularjs.org/api/ng.$rootScope.Scope for more info.

answered Feb 4, 2014 at 20:48

dnc253

40.4k41 gold badges145 silver badges160 bronze badges

Collectives™ on Stack Overflow

Auto-updating scope variables in angularjs

2 Answers 2

UPDATE:

For example:

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

UPDATE:

For example:

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related