What is parentValueWatch in AngularJS?

Question

I am using batarang to determine the source of some performance issues. One of the bigger culprits was my own code, but this parentValueWatch thing is now topping the charts and I have no idea where it is or what triggers it. My brains are on the floor from so much Googling... anybody know?

(AngularJS v1.2.24)

Answer 1

ParentValueWatch is when a directive checks in its parent scope to see if any values have changed and, therefore, need to be changed itself.

Consider the simple directive,

{
   restrict:"AE",
   scope:{
      foo:'='
   }
}

Now let's say in the parent scope, foo is an object.

$parent.$scope.foo = {
    bar:"zim"
}

Each $digest cycle, the child $scope will need to check the parent scope's foo value and each of its properties.

If foo was a really big and deeply nested object, this would take a long time, thus why it is taking so long.

Inside the HTML, this might look like this:

<div parent-directive>
<div foo-directive foo=bar></div></div>

One quick work around for this is to "freeze-dry" the values by using ng-init.

<div parent-directive>
<div foo-directive ng-init='zug={bar:$parent.foo.bar}' foo=zug></div></div>

Now the value that is bound to a new object. You lose easy binding, but gain performance.

It is always a tradeoff.