triggering $onChanges for updated one way binding

Question

I'm really happy with the "new" $onChanges method you can implement in a component's controller. However it only seems to be triggered when the bound variable is overwritten from outside my component, not (for instance) when an item is added to an existing array

It this intended behaviour or a bug? Is there another way of listening to updates to my input bindings, besides doing a $scope.$watch on it?

I'm using Angular 1.5.3

Answer 1

First TL;DR For an array that is bounded via one-way binding, a watch expression is added that does not check for object equality but uses reference checking. This means that adding an element to the array will never fire the '$onChanges' method, since the watcher will never be 'dirty'.

I've created a plnkr that demonstrates this: http://plnkr.co/edit/25pdLE?p=preview

Click the 'add vegetable in outer' and 'change array reference in outer' and look at the 'Number of $onChanges invocation'. It will only change with the latter button.

Complete explanation To fully grasp what is going on, we should check the angular code base. When a '<' binding is found, the following code is used to set up a watch expression.

case '<':
        if (!hasOwnProperty.call(attrs, attrName)) {
          if (optional) break;
          attrs[attrName] = void 0;
        }
        if (optional && !attrs[attrName]) break;

        parentGet = $parse(attrs[attrName]);

        destination[scopeName] = parentGet(scope);
// IMPORTANT PART //
        removeWatch = scope.$watch(parentGet, function        parentValueWatchAction(newParentValue) {
          var oldValue = destination[scopeName];
          recordChanges(scopeName, newParentValue, oldValue);
          destination[scopeName] = newParentValue;
        }, parentGet.literal);
// ------------- //
        removeWatchCollection.push(removeWatch);
        break;

The important part here is how the 'scope.$watch' expression is set up. The only parameters passed are the parsed expression and the listener function. The listener function is fired once the '$watch' is found dirty in the digest cycle. If it is fired, the listener will execute the 'recordChanges' method. This records an '$onChanges' callback task that will be executed in the '$postDigest' phase and notify all components that are listening for the '$onChanges' lifecycle hook to tell them if the value has changed.

What's important to keep in mind here, if the '$watcher' is never dirty, the '$onChanges' callback is not triggered. But even more importantly, by the way the '$watch' expression is created, it will NEVER be dirty, UNLESS the reference changes. If you wanted to check for equality between objects instead of reference, you should pass an extra third parameter that asks for this:

$watch: function(watchExp, listener, objectEquality, prettyPrintExpression)

As this is not the case here with the way the one way binding is set up, it will ALWAYS check for reference.

This means, if you add an element to an array, the reference is not changed. Meaning the '$watcher' will never be dirty, meaning the '$onChanges' method will not be called for changes to the array.

To demonstrate this, I've created a plnkr: http://plnkr.co/edit/25pdLE?p=preview

It contains two components, outer and inner. Outer has primitive string value that can be changed through an input box and an array that can be extended by adding an element or have its reference changed.
Inner has two one-way bounded variables, the value and the array. It listens for all changes.

this.$onChanges = setType;
function setType() { 
  console.log("called");
  vm.callCounter++;
}

If you type into the input field, the '$onChanges' callback is fired every time. This is logical and expected, since a string is primitive so it cannot be compared by reference, meaning the '$watcher' will be dirty, and the '$onChanges' lifecycle hook fired.

If you click the 'Add vegetable in outer', it will execute the following code:

this.changeValueArray = function() {   
      vm.valueArray.push("tomato");
  };

Here we just add a value to the existing bounded array. We're working by reference here, so the '$watcher' is not fired and there is no callback. You will not see the counter increment or the 'called' statement in your console.

Note: If you click the 'Add something to the array' inside the inner component, the array in outer component also changes. This is logical, since we are updating the exact same array by reference. So even though it is a one-way binding, the array can be updated from inside the inner component.

If you change the reference in the outer component by clicking 'Change array reference in outer', the '$onChanges' callback is fired as expected.

As to answer your question: Is this intended behaviour or a bug? I guess this is intended behaviour. Otherwise they would have given you the option to define your '<' binding in a way that it would check for object equality. You can always create an issue on github and just ask the question if you'd like.