angular $scope.$watch for array

Question

According to this: How to deep watch an array in angularjs? it should work but i dont know what i am doing wrong...

    $scope.$watch('statuses', function(newVal, oldValue) {
      if (oldValue==newVal) return false;

      console.log("st changed");
    },true);

And let's say i somehow asynchronly update the $scope.statuses for example after 3seconds

setTimeout(function() {
    $scope.statuses.push("ahhh");
},3000);

And nothing happens...any ideas why please?

Sai · Accepted Answer · 2014-02-22 23:27:54Z

2

Use the following code:

setTimeout(function() {
  $scope.$apply(function () {
    $scope.statuses.push("ahhh");
  }
},3000);

You have to use $apply since AngularJS is unaware of update to $scope

As a convenience, AngularJS provides $timeout, which is like setTimeout, but automatically wraps your code in $apply by default.

answered Feb 22, 2014 at 23:27

Sai

2,06819 silver badges26 bronze badges

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

Comments

Eugene P. · Accepted Answer · 2014-02-22 23:30:29Z

1

 $scope.statuses = [];

                $scope.$watch('statuses', function(newVal, oldValue) {
                  console.log(newVal, oldValue);
                  if (oldValue==newVal) return false;

                  console.log("st changed");
                },true);


                setTimeout(function() {
                    $scope.statuses.push("ahhh");
                    $scope.$apply();
                },3000);

$apply function serves for notification of update to $scope.

live sample http://plnkr.co/edit/LUjESyZOPfIALE2q5YYi?p=preview

if statuses will host just primitive values, better use $watchCollection

answered Feb 22, 2014 at 23:30

Eugene P.

2,63521 silver badges23 bronze badges

9 Comments

Lukas Lukac Over a year ago

no primitive, it was just for ilustration but i dont understand why to use watch when i still have to use $apply... ?

Eugene P. Over a year ago

difference between $watch and $watch collection, well documented here bennadel.com/blog/… $apply you have to use each time when you produce new scope. making a function for example. as function itself creates a scope(context)

Lukas Lukac Over a year ago

missunderstanding :) My point is... i don't need to use watch if i use $apply right? The watch is there only if i need to do something when watched object changes?

Eugene P. Over a year ago

nope. $apply is just bridge for you from your timeout function(where you did some changes) to watch callback(where you catch changes). So, you have to use both. Or as guys mentioned in other answer. $timeout. is another option. )

Lukas Lukac Over a year ago

Hmmm... but then i should write something in the watch function what will update my scope or...? Because when i do this $scope.statuses.push("ahhh"); $scope.$apply(); it will automaticly update my scope even without the watch function.

|

Sylvain · Accepted Answer · 2014-02-22 23:33:15Z

1

Use $timeout which is the Angular version of setTimeout. When you use $timeout, AngularJS rebinds everything after the callback.

Having to manually call $apply is always a sign that you did not do something the angular way. It's a way to tell Angular: I've done something behind your back; please refresh.

answered Feb 22, 2014 at 23:33

Sylvain

19.3k26 gold badges103 silver badges148 bronze badges

Collectives™ on Stack Overflow

angular $scope.$watch for array

3 Answers 3

Comments

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related