Polymer-AngularJS two-way data binding

I have some custom element created with Polymer. Let's call it x-input, and it looks like this:

<polymer-element name="x-input" attributes="name">
    <template>
        <input type="text" value={{name}}> <span>{{name}}</span>
        <br />
        <input type="range" value={{age}} > <span>{{age}}</span>
    </template>
 </polymer-element>

And I have this html I use Angular:

<html ng-app="testApp">
    <body ng-controller="AppCtrl">
        <input id="outer_input" type="text" ng-model="kids[0].name" value={{kids[0].name}} /> <br />
        <span>name: {{kids[0].name}} age: {{kids[0].age}}</span><br />
        <x-input ng-repeat="kid in kids" name={{kid.name}} age={{kid.age}}>
        </x-input>
    </body>
</html>

Here is the JS:

var testApp = angular.module('testApp', []);

testApp.controller('AppCtrl', function ($scope, $http)
{
    $scope.kids = [{"name": "Din", "age": 11}, {"name": "Dina", "age": 17}];
}

The problem is with the two-ways data binding. When I change the #outer_input input value the x-input inner values (name and age) are changed.

But when I change the custom element input only inner binded variable are changed.

How can I change value of binded variable within the polymer element and it will change the model and all outer bound UI and data (two-way binding)?

Thanks

If you tell it to, Polymer will reflect model changes back out to the published property (its attribute), but issue is that Angular doesn't observer bindings to attributes.

There's a patch that makes this work like you want: https://github.com/eee-c/angular-bind-polymer

More info here: http://blog.sethladd.com/2014/02/angular-and-polymer-data-binding.html

I started the ng-polymer-elements project which lets you have two-way binding between web components and Angular in an Angular-like way:

<input ng-model="model"/>
<paper-input ng-model="model"></paper-elements>

It comes with support for Polymer core and paper elements, and can be configured for any web component.

I belive this is what youre looking for simple and transparent 2 way data binding and capability to expand to more custom elements and for javascript not dart

NG Polymer Elements

This is my working solution, ng-polymer-elements doesn't work for me ($dirty, $pristine, etc. not working). This is very straighforward IMO

angular.module 'tinizen.admin.ui'
.directive 'paperInput', ->
  restrict: 'E'
  require: 'ngModel'
  link: (scope, elem, attrs, ctrl)->

    watcher = ->
      if ctrl.$dirty then ctrl.$invalid else false

    scope.$watch watcher, (invalid)->
      elem[0].invalid = invalid

    updateModel = (inputValue)-> ctrl.$setViewValue inputValue

    ## attrs.$observe 'inputValue', updateModel not working
    ## so I have to use on 'input'
    elem.on 'input', ->
      scope.$apply ->
        updateModel elem.prop('inputValue')

    updateModel()

    ctrl.$render = ->
      elem.prop 'inputValue', ctrl.$viewValue

according to their documentation, when binding to native elements, you have to add an extra binding notation

https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#two-way-native

Here {{name}} will update on input events, the {{age}} only on the change event

<polymer-element name="x-input" attributes="name">
    <template>
        <input type="text" value={{name::input}}> <span>{{name}}</span>
        <br />
        <input type="range" value={{age::change}} > <span>{{age}}</span>
    </template>
 </polymer-element>

来源：https://stackoverflow.com/questions/23563880/polymer-angularjs-two-way-data-binding

标签

javascript

angularjs

element

polymer

shadow-dom