Polymer-AngularJS двусторонняя привязка данных
У меня есть какой-то пользовательский элемент, созданный сполимер, Давайте назовем это x-input, и это выглядит так:
<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>
И у меня есть этот HTML, я использую 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-входные внутренние значения (имя и возраст) изменены.
Но когда я изменяю пользовательский элемент ввода, меняются только внутренние переменные.
Как я могу изменить значение связанной переменной внутри полимерного элемента, и это изменит модель и весь внешний интерфейс и данные (двустороннее связывание)?
Спасибо