Reflect attributes for two way data-binding between Polymer and AngularJS

[danguilherme]

Set attributes to reflect the changes, so we can implement two-way data binding between Angular and Polymer.

For more information, please see this SO question.

And maybe this behavior can be implemented in other core-* components?

[sjmiles]

Binding data this way is not performant and is generally a bad idea.

In particular, standard <input> does not reflect it's value this way. Angular and other libraries must bind directly to the input property of the element.

This is the better strategy for arbitrary data binding, and IMO it's up to the other libraries to adapt to the notion of a wide palette of elements to interact with, instead of the few standard elements that are generally supported today.

Fwiw, the intended baseline for interoperability is via events, again in the style of the existing DOM. E.g., <core-input> fires events that indicate when it's properties change. Sadly, at least to my limited knowledge, Angular's support for listening to non-standard events is also limited. Please correct me if this has changed, or I have it wrong.

[danguilherme]

Binding data this way is not performant and is generally a bad idea.

I wondered if that would be a good strategy, because beyond String attributes, we could also have Object ones, as I mentioned at the question I mentioned above. That's the situation I had, when I published an Obect attribute with reflect: true:

About the interoperability via events, I think I can get through it by writing custom directives, equivalent to ng-click, but more specific for polymer components.

Thanks for your clarification.

[sjmiles]

I'm interested to hear if you have success with custom directives.

If it's possible to make a directive that can listen to arbitrary events (ng-event="custom-event: handler", or something like that) that would be outstanding.

[d33d33]

I just write an Angular directive which allow two-way data binding on <core-input> based on input and change events.
See : https://github.com/D33D33/angular-bind-polymer

[danguilherme]

It really works for the text inputs, but it kinda loses the "two-way data binding magic"... 😞

I think I will move on using Angular alone. I don't feel that confident using Polymer web components with Angular yet. There's not so many material on the internet and I don't have enough time right now to try a new library.

Thank you for your attention.

[davidpfahler]

I think the underlying question here is "Can we use Polymer today?". If we cannot do this as angular developers, the answer is partly no and that would be sad :(

[GabiAxel]

I created https://github.com/GabiAxel/ng-polymer-elements/ to address two-way data binding between Polymer and Angular, have a look.

[davidkaneda]

Could we perhaps add the reflect even if not performant? I've tried ng-polymer-elements, scoured the web, and this incompatibility is pretty grueling. I'm certainly no expert on Angular or Polymer (just starting a project where I'm attempting to use both), but could it be made optional via an element attribute (eg. <core-input ng-model="myModel" reflect></core-input>?

[morethanreal]

You could extend core-input and set the default to reflect. I would prefer not to add the reflect, because the element should be as performant as possible out of the box.

[davidkaneda]

@morethanreal Just curious, is there no way to apply "reflect" via an attribute?

[davidkaneda]

Actually, off-hand, it looks like paper-checkbox is set to reflect: true by default, but still doesn't play nicely. Sorry I don't have time to do a deep dive to figure out all the pieces that'll make these play nicely-