Question

我有一些使用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和数据（双向绑定）？

由于

Answer 1

如果你告诉它，Polymer会将模型更改反映回已发布的属性（其属性），但问题是Angular不会观察到属性的绑定。

有一个补丁可以让您按照自己的意愿工作：https://github.com/eee-c/angular-bind-polymer

此处有更多信息：http://blog.sethladd.com/2014/02/angular-and-polymer-data-binding.html

Answer 2

我启动了ng-polymer-elements项目，它允许您以类似Angular的方式在Web组件和Angular之间进行双向绑定：

<input ng-model="model"/>
<paper-input ng-model="model"></paper-elements>

它支持聚合物核心和纸张元素，可以配置任何Web组件。

Answer 3

我相信这就是你正在寻找简单透明的双向数据绑定和扩展到更多自定义元素和javascript而不是dart的能力

NG Polymer Elements

Answer 4

这是我的工作解决方案，ng-polymer-elements对我不起作用（$ dirty，$ pristine等不工作）。这是非常直截了当的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

Answer 5

根据他们的文档，当绑定到本机元素时，您必须添加额外的绑定表示法

https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#two-way-native

此处{{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>

Polymer-AngularJS双向数据绑定

5 个答案: