CODEWITHSUNDEEP
javascriptangularjselementpolymershadow-dom
vlio20
vlio20

Reputation: 9295

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

Upvotes: 2

Views: 6725

Answers (5)

Steve
Steve

Reputation: 2046

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>

Upvotes: 0

Strife86
Strife86

Reputation: 1155

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

Upvotes: 1

tungv
tungv

Reputation: 117

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

Upvotes: 0

Gabriel
Gabriel

Reputation: 862

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.

Upvotes: 2

ebidel
ebidel

Reputation: 24109

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

Upvotes: 6

Related Questions