$watchCollection on an array of js objects in an Angular Controller requires an anonymous function?

Question

I have a simple js array being retrieved by an angular factory, injected into a control, watched, then displayed in a table using ng-repeat from within a view state managed by ui-router.

Initially I attempted to subscribe to this array using $watchCollection...

self.$watchCollection( self.Data, function(newData, oldData){
  self.total = newData.length;
});

However this was only running when I initially load the app. I found that the only way to subscribe to the running collection was to use an anonymous function returning the array in question.

self.$watchCollection( function() { return self.Data }, function(newData, oldData){
  self.totalWatchedWithAnonFunc = newData.length;
})

View this all in http://plnkr.co/edit/L7mycl

From everything I read, all I should have needed to do for a valid subscription was to pass in the array itself and not an anonymous function that returns the array.

The reason I included ui-router is because my actual application is using it heavily and I wanted to mock up my environment as closely as possible to how I've got things set up.

What am I not understanding? Could I be doing something differently?

Thanks.

Updated per stevuu's suggestion :: plnkr.co/edit/L7mycl

beauXjames
– beauXjames

2014-05-07 15:54:26 +00:00
Commented May 7, 2014 at 15:54 — beauXjames
– beauXjames, Commented May 7, 2014 at 15:54

Steve Klösters · Accepted Answer · 2014-05-07 15:39:11Z

1

Are you looking for self.$watchCollection("Data", ...) instead of self.$watchCollection(self.Data, ...)? Try it out! See the docs to see why: the first argument is a string evaluated on the scope, or a function taking a scope that returns something you want to watch.

answered May 7, 2014 at 15:39

Steve Klösters

9,4472 gold badges44 silver badges53 bronze badges

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

2 Comments

beauXjames Over a year ago

The property name as a string?!?! I am stunned that this is the solution...and not even scoped? That's some crazy new territory...thanks for the speedy response.

Steve Klösters Over a year ago

It's a recurring thing in AngularJS to evaluate strings on the scope, things like ngRepeat, ngInit, ngInclude, et cetera et cetera, all take expressions that are evaluated on the current scope. It's a little odd compared to other languages/frameworks but when you get used to it, it's quite powerful!

Collectives™ on Stack Overflow

$watchCollection on an array of js objects in an Angular Controller requires an anonymous function?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related