eee-c / angular-bind-polymer Goto Github PK

It seems that when passing an object via attribute to polymer element the tow way data binding not working. Here is a link to SO:
http://stackoverflow.com/questions/24340258/angular-polymer-data-binding

Binding is not working when directive uses transcluding. For example ng-repeat or custom directive.
Do you know the way how to solve this problem?
Looks like observers don't exist any longer.

This scenario will show blank pre elements?
<paper-input label="test" floatingLabel bind-polymer value="{{test}}" inputValue="{{testing}}">
</paper-input>
<pre>{{test}}</pre>
<pre>{{testing}}</pre>

Please make demostration

I was creating some POCs around angular and polymer and wanted to have two-way data binding working between them. However, two-way binding did not work with my POC. I have installed angular-bind-polymer separately and tried with the demo index page you have created. Binding is not working with demo page as well. What am I doing wrong here?

When there are multiple bind-polymer attributes only when the first input will update the other inputs would update.

I have added scope to the directive like below.

angular.module('angularBindPolymer', []).
directive('bindPolymer', function() {
  return {
    restrict: 'A',
    scope: {change: "="}, // Scope added here
    link: function(scope, element, attrs) {
        .........
    }
}

After I added the scope, the two way bind stopped working. If I remove scope then everything is back to normal.

I have had no luck trying to bind complex objects.

Does not work:

     <template>
            <input id="inputField" type="text" value="{{boundModel.name}}" on-click="{{setFocus}}">
    </template>

where boundModel is a object with property name.

Works:

     <template>
            <input id="inputField" type="text" value="{{boundModel}}" on-click="{{setFocus}}">
    </template>

where boundModel is a string.

When I use the bind polymer directive on elements hidden with ng-if and for example indirectly via ui-router, I get the following exception:

 TypeError: Cannot read property 'match' of undefined
    at link (http://localhost:8080/bower_components/angular-bind-polymer/angular_bind_polymer.js:11:43)
    at Z (http://localhost:8080/bower_components/angular/angular.min.js:70:149)
    at A (http://localhost:8080/bower_components/angular/angular.min.js:59:203)
    at g (http://localhost:8080/bower_components/angular/angular.min.js:51:299)
    at A (http://localhost:8080/bower_components/angular/angular.min.js:59:147)
    at $get.c (http://localhost:8080/bower_components/angular/angular.min.js:66:333)
    at g (http://localhost:8080/bower_components/angular/angular.min.js:51:299)
    at http://localhost:8080/bower_components/angular/angular.min.js:50:415
    at $get.h (http://localhost:8080/bower_components/angular/angular.min.js:52:283)
    at l (http://localhost:8080/bower_components/angular/angular.min.js:56:293)

The directive is not working for polymer property name with came casing. probably need to rewrite the regex again var match = $attr[prop].match(/{{\s([.\w]+)\s_}}/);