PolymerDart custom element with two-way binding to Angular.dart model

Question

I managed to two-way-bind my Angular.dart model to paper elements using the bind- syntax:

<paper-input bind-value="item.name"></paper-input>

Now I want to create a custom component that can expose a property for two-way binding:

@CustomTag('px-test')
class PxTest extends PolymerElement {

  @published
  var data = 1;
}

used like:

<px-test bind-data="item.data"></px-test>

The component gets rendered, and the data-field, referenced in the component template with {{data}} is rendered correctly, but the binding of data to item.data is not happening, ie if item.data is 55 the component still renders 1. Angular also tries to create the binding, a watch on item.data is created, but the changes are not propagated to PxTest.data What do I have to change in PxTest to make the binding happening?

Versions: Angular: 1.0, Polymer: 0.15.1+3

Answer 1

I don't know details about how binding between Angular.dart and Polymer.dart works but I suggest you try

//@published
@PublishedProperty(reflect: true)
var data = 1;

this way the DOM attribute gets updated too.