Polymer-AngularJS双向数据绑定
[英]Polymer-AngularJS two-way data binding
问题描述
I have some custom element created with Polymer . 
我有一些用Polymer创建的自定义元素。 Let's call it x-input, and it looks like this: 我们称之为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>
And I have this html I use Angular: 我有这个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>
Here is the JS: 这是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. 当我更改#outer_input输入值时，x输入内部值（名称和年龄）会发生变化。
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)? 如何在聚合物元素中更改绑定变量的值，它将更改模型和所有外部绑定的UI和数据（双向绑定）？
Thanks 谢谢
5 个解决方案
解决方案1
6 已采纳 2014-05-09 18:31:44
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. 如果您告诉它，Polymer会将模型更改反映回已发布的属性（其属性），但问题是Angular不会观察到属性的绑定。
There's a patch that makes this work like you want: https://github.com/eee-c/angular-bind-polymer 有一个补丁可以让你的工作像你想要的那样： https ： //github.com/eee-c/angular-bind-polymer
More info here: http://blog.sethladd.com/2014/02/angular-and-polymer-data-binding.html 更多信息： http ： //blog.sethladd.com/2014/02/angular-and-polymer-data-binding.html
解决方案2
2 2014-07-30 07:57:32
I started the ng-polymer-elements project which lets you have two-way binding between web components and Angular in an Angular-like way: 我启动了ng-polymer-elements项目，它允许您以类似Angular的方式在Web组件和Angular之间进行双向绑定：
<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. 它支持聚合物核心和纸张元素，可以配置任何Web组件。
解决方案3
1 2014-08-15 15:36:47
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 我相信这就是你正在寻找简单透明的双向数据绑定和扩展到更多自定义元素和javascript不能飞镖的能力
解决方案4
0 2014-08-07 04:14:45
This is my working solution, ng-polymer-elements doesn't work for me ($dirty, $pristine, etc. not working). 这是我的工作解决方案， ng-polymer-elements对我不起作用（$ dirty，$ pristine等不工作）。 This is very straighforward IMO 这是非常直接的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
解决方案5
0 2015-10-03 04:38:28
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 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 此处{{name}}将更新输入事件，{{age}}仅更改事件
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.