How to ignore changes in a property which in the scope?

Question

How to ignore changes in a property which in the scope?

In some complex scenarios, one might want to ignore property changes since it can throw stack overflow.

Check this:

$scope.father = {
    name: "John",
    children: []
};
var child = {
    name: "Mary",
    father: $scope.father
};
$scope.father.children.push(child);

This creates and infinite recursion which causes stack overflow as angularjs tries to go over all of the properties for dirty checking.

Is there a prefix or something which would allow me to force angularjs to ignore watching that property?

javascript
angularjs

Answer 1

Unless you are setting $watch's objectEquality parameter to true, $watch should not be doing "shallow" dirty checking (i.e., comparing each object property) – it should only be checking to see if the object is now referencing some other object.

Here's a fiddle that watches father but does not notice when the name property is changed (click the hyperlink to change the name).

If I put {{father}} into the HTML/view, Chrome notices the circular structure, rather than stack overflowing:

TypeError: Converting circular structure to JSON
  at Object.stringify (native)
  at toJson (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js:721:15)

Just curious, what are you doing to see the stack overflow (and what browser)?