CODEWITHSUNDEEP
javascriptangularjs
robin
robin

Reputation: 1925

Issue With Angular $scope.Watch

I am having a scope.watch like below, in my link function of the directive

scope.$watch(function () {
return scope.chartConfig;
}, function (value) {
console.log(value);
}, true);

Its trowing the below error 

angular.js:12221 TypeError: Illegal invocation
    at isArrayLike (angular.js:278)
    at forEach (angular.js:332)
    at copy (angular.js:913)
    at copy (angular.js:879)
    at putValue (angular.js:944)
    at copy (angular.js:926)
    at copy (angular.js:879)
    at putValue (angular.js:944)
    at copy (angular.js:926)
    at copy (angular.js:879)(anonymous function) @ angular.js:12221(anonymous function) @ angular.js:9055Scope.$digest @ angular.js:15574Scope.$apply @ angular.js:15824(anonymous function) @ angular.js:17580completeOutstandingRequest @ angular.js:5370(anonymous function) @ angular.js:5642
angular.js:12221 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.0/$rootScope/infdig?p0=10&p1=%5B%5D
    at angular.js:68
    at Scope.$digest (angular.js:15594)
    at Scope.$apply (angular.js:15824)
    at angular.js:17580
    at completeOutstandingRequest (angular.js:5370)
    at angular.js:5642(anonymous function) @ angular.js:12221(anonymous function) @ angular.js:9055Scope.$apply @ angular.js:15826(anonymous function) @ angular.js:17580completeOutstandingRequest @ angular.js:5370(anonymous function) @ angular.js:5642
angular.js:68 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.0/$rootScope/infdig?p0=10&p1=%5B%5D

Please find the plunker link for the same

Upvotes: 0

Views: 401

Answers (1)

tasseKATT
tasseKATT

Reputation: 38490

The main problem here is the error TypeError: Illegal invocation.

The object you are deep watching contains DOM elements, which angular.copy can't handle.

For example chartConfig.data.datasets[0].controller.chart.chart.canvas which is a reference to the actual canvas.

Furthermore, deep watching such a massive object is not good for performance.

Add a watcher on just the data you really need to watch.

Upvotes: 1

Related Questions