聚合物AngularJS双向数据绑定 [英] Polymer-AngularJS two-way data binding
问题描述
我有聚合物创造了一些自定义元素。让我们把它的X输入，它看起来像这样：
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>
下面是JS：
var testApp = angular.module('testApp', []);
testApp.controller('AppCtrl', function ($scope, $http)
{
$scope.kids = [{"name": "Din", "age": 11}, {"name": "Dina", "age": 17}];
}
问题是两方面的数据绑定。当我修改 #outer_input 输入值的x输入的内在价值（姓名和年龄）而改变。
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.
我怎样才能改变聚合物元素中绑定变量的值，它会改变模型和所有外部绑定的用户界面和数据（双向绑定）？
感谢
推荐答案
如果你告诉它，聚合物将反映模型变回了所公布的财产（其属性），但问题是，角度不观察者绑定属性。
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.
有一个补丁像你想使这项工作：<一href=\"https://github.com/eee-c/angular-bind-polymer\">https://github.com/eee-c/angular-bind-polymer
There's a patch that makes this work like you want: https://github.com/eee-c/angular-bind-polymer
此处了解详情：<一href=\"http://blog.sethladd.com/2014/02/angular-and-polymer-data-binding.html\">http://blog.sethladd.com/2014/02/angular-and-polymer-data-binding.html
这篇关于聚合物AngularJS双向数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
