One-way bindings + shallow watching

[thorn0]

When the PR #13928 (one-way bindings) was discussed, the shallow watching (using $watchCollection) wasn't implemented as it wasn't clear what the use case is. Seems like I've found a use case.

Suppose we have a component:

app.component('myList', {
  template: '...',
  bindings: { items: '<' }
});

and it's used like this:

<my-list items="items|orderBy:'title'"></my-list>

Can you see what's going on here? The orderBy filter returns a new array every time it's called, so we get $rootScope:infdig. Plunker.

Changing the type of the binding to =* makes it work.

[jbedard]

I was recently looking into this and wondering if this could be done by changing how $parse watchers work instead of resorting to something such as =*. Object/array literals have the same problem as filters. Both cases already return the same instance if all expression inputs are simple and have not changed so one option would be expanding that to somehow work with object/array inputs.

[thorn0]

Can we probably somehow reuse the array returned from the filter when the identity of the expression result doesn't change?

[Narretz]

Yes, this came up in the issue after we decided on the simple implementation. It was suggested that shallow watching had been introduced exactly for that purpose, so imo we can port it to one-way bindings. A general solution be interesting too.

[adamreisnz]

I think I have another use case for the need of shallow watching objects for one way bindings. For example when using moment.js, and passing a moment object as a binding to some component, it will not update if the moment date is changed externally, because the object reference doesn't change.

[adamreisnz]

Another use case is binding a "user" object to a certain component, which uses several of the user's properties to create an avatar, for example their initials, color, profile photo, etc. If any of those properties changes externally, the changes need to be reflected in the component. However, the component itself doesn't need to make changes to the object. Hence the need for a one way binding with a shallow watch.

[adamreisnz]

A third use case is when watching an array. When adding elements to or removing elements from an array which is bound to a component via one-way binding, the $onChanges handler doesn't fire.

[petebacondarwin]

Would it be acceptable to implement <* that would be a one-way binding that uses $watchCollection instead of a shallow $watch to trigger $onChanges?

[adamreisnz]

That will work for arrays, but still not for objects right? Is there a technical difficulty with implementing a shallow watch for one way bindings?

I use moments a lot for a very date & time operations heavy app, and not being able to detect shallow changes on the moment object is holding me back from embracing the new component style of development.

[petebacondarwin]

It sould work for shallow comparison of objects too. See https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watchCollection

[adamreisnz]

Sorry you're right, I got confused yesterday.

Yes the equivalent of a =* for shallow watching of one-way bindings via <* using $watchCollection would be great, thanks!