Angular Polymer data-binding

Question

I want to make two way data binding between Polymer and Angular, for this I am using Angu-poly library.

Here is a link to an example which is working, while passing strings via name and age attributes: working.

<x-kid bind-polymer ng-repeat="kid in kids" angupoly="{name:'kid.name', age:'kid.age'}">
</x-kid>

But when I try to make it with passing an object via kid attribute, it seems that something goes wrong, here is the link: not working.

<x-kid bind-polymer angupoly="{kid:'kid'}">
</x-kid>

What should I do to make it work?

Update:
Also tried it with this library and it didn't work. the code will look like this:

<x-kid bind-polymer kid={{kid}}>
</x-kid>

Big Update:
Here I made some progress tweaking the "angular-bind-polymer" library. For now I am able to bind objects from outside polymer into polymer, here is the updated plunker. The problem now is to do this in the other direction.
Note: I am getting some exception from angular side, take a look maybe you can help to solve it. I think we are very close :).

Having the same [problem](http://stackoverflow.com/questions/25181605/polymer-web-component-attribute-value-not-getting-passed-down). A workaround I found was to create an attribute listener e.g. `angupolyChanged: function(n,o){//set stuff}` to set values. But changes are not propagating out of the component yet... — furier, Aug 07 '14 at 13:07
check out following project for double binding. I just had some success with this yesterday: https://github.com/GabiAxel/ng-polymer-elements — amit, Aug 15 '14 at 07:06
I'm trying to bind to backbone models, do you think it will be possible? http://stackoverflow.com/questions/25816912/how-to-bind-backbone-model-to-polymer-element — Nikos, Sep 12 '14 at 21:48

score 1 · Answer 1 · answered Jun 30 '14 at 10:43

1

I think it is because of some kind of reference.

How should I explain, just like you work with object in scope in data binding. when you update the object to a new object, the UI will not update with new object values.

answered Jun 30 '14 at 10:43

Mavlarn

3,807
2
37
57

Why not? Angular directives works this way, I expect the same from polymer components... – vlio20 Jun 30 '14 at 13:41

score 1 · Answer 2 · answered Jul 03 '14 at 09:08

1

It looks that Material Design is THE answer, excerpt:

Our goal is to deliver a lean, lightweight set of AngularJS-native UI elements that implement the material design system for use in Angular SPAs.

answered Jul 03 '14 at 09:08

Jean Davy

2,062
1
19
24

I am talking about creating my own elements. I hope angular will show how to make the data binding work in both directions. – vlio20 Jul 03 '14 at 12:08
Binding barely works for polymer elements (which implement the material design). Things like ng-model don't bind at all (although I'm trying to hack at that). – ipaul Jul 03 '14 at 16:29
It is working with primitives (using some libraries, you can find two of them in the question). – vlio20 Jul 04 '14 at 06:19

score 1 · Answer 3 · answered Jul 07 '14 at 14:22

1

Maybe you could find clues from this blog even if its aim is for dart:

Angular and Polymer Data Binding, Together!

answered Jul 07 '14 at 14:22

memedidou

11
1

Nope.... It is talking about data binding but not object data binding in particular. – vlio20 Jul 07 '14 at 15:17

score 1 · Answer 4 · answered Oct 28 '14 at 19:08

1

Also take a look at ng-polymer, this project may help give you some insight

answered Oct 28 '14 at 19:08

dan

2,857
6
34
60

score 1 · Accepted Answer · answered Jun 11 '15 at 20:11

Here is an updated example http://plnkr.co/w1icAU

With Polymer 1.0 two way binding is much simpler and also able to bind objects not just string values.

Here is the main part

<x-kid ng-repeat="kid in ::kids" angupoly="{name:'kid.name', age:'kid.age'}"></x-kid>

Angular Polymer data-binding

5 Answers5

Linked