AngularJS — Passing object/object property to be $watched into $scope.$watch

Question

Deep watching on large objects a performance killer—so I'd like to be able to pass a dynamic object/property into the watchExpression parameter of the $scope.$watch function, whenever you invoke an action that changes that particular object or property.

I also have a bunch of different objects and don't want to set up watches for all of them.

For example:

var watchingFunction = function (objectToBeWatched) {
    $scope.$watch(function (objectToBeWatched) {return objectToBeWatched;}, function(newValue, oldValue) {
        if (newValue !== oldValue) {...};
}, true);

$scope.object = true;
$scope.changeMyObject = watchingFunction(object);

HTML

<input type="checkbox" ng-model="object" ng-change="changeMyObject()">

I believe this wouldn't work because invoking the function watchingFunction() only runs $scope.$watch() once? Where as if you define $scope.$watch on the $scope (instead of wrapped inside the watchingFUnction() it is continually watching $scope.$watch's watchExpression?

If this is the case, are there any creative things you can do to return a value from watchExpression which takes an outside parameter instead of explicitly declaring the object within $scope.$watch's watchExpression?

Thanks a bunch!

EDIT Additional clarity—I'm using the $scope.$watch to make $scope.$broadcast's to another scope every time a value on the current scope changes.

I'm confused. If you know that something is changing (like, with ng-change), then you don't need a $watch. What are you actually trying to achieve? What is the use case? — New Dev
– New Dev, Commented May 14, 2015 at 8:05
Great point! — Slightly overthought that... :-P I updated the question with an edit at the bottom. Thank you. — nikk wong
– nikk wong, Commented May 14, 2015 at 8:11
Ok, but now why do you need to re-assign the watched expression? — New Dev
– New Dev, Commented May 14, 2015 at 8:14
Would a typical use-case for this to be to pass multiple objects into the same $scope.$watch? — nikk wong
– nikk wong, Commented May 14, 2015 at 8:16
I don't understand what your use case is. I suggest you edit the question and clarify with a small illustrative example what you are trying to achieve — New Dev
– New Dev, Commented May 14, 2015 at 8:20

Krzysiek · Accepted Answer · 2015-05-14 08:10:18Z

1

As $scope.$watch documentation states watchExpression is called multiple times (even in one digest cycle), but if you passed object there and you change this object to another then it will not work. That is why it is better to pass string watchExpression

$scope.$watch('object', function() {...} )

or change what is inside object.

<input type="checkbox" ng-model="object.value" ng-change="changeMyObject()">

answered May 14, 2015 at 8:10

Krzysiek

2672 silver badges9 bronze badges

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

1 Comment

tiblu Over a year ago

Maybe explicitly worth to mention in your post that $scope.$watch also supports nested object watching, that is $scope.watch('object.nestedobject.property', function () {...})

Collectives™ on Stack Overflow

AngularJS — Passing object/object property to be $watched into $scope.$watch

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related