vli*_*o20 2 javascript element angularjs shadow-dom polymer
我有一些用Polymer创建的自定义元素.我们称之为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输入内部值(名称和年龄)会发生变化.
但是当我更改自定义元素输入时,只更改了内部绑定变量.
如何在聚合物元素中更改绑定变量的值,它将更改模型和所有外部绑定的UI和数据(双向绑定)？
谢谢
如果您告诉它,Polymer会将模型更改反映回已发布的属性(其属性),但问题是Angular不会观察到属性的绑定.
有一个补丁可以让你的工作像你想要的那样:https://github.com/eee-c/angular-bind-polymer
更多信息:http://blog.sethladd.com/2014/02/angular-and-polymer-data-binding.html
| 归档时间： |
|
| 查看次数： |
6514 次 |
| 最近记录： |