2

我有一些使用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-input 内部值（名称和年龄）会更改。

但是当我更改自定义元素输入时，只会更改内部绑定变量。

如何更改聚合物元素中绑定变量的值，它将更改模型和所有外部绑定 UI 和数据（双向绑定）？

谢谢

4

5 回答 5

6

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

有一个补丁可以让这项工作如你所愿：https ://github.com/eee-c/angular-bind-polymer

更多信息在这里：http: //blog.sethladd.com/2014/02/angular-and-polymer-data-binding.html

于 2014-05-09T18:31:44.763 回答
2

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

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

它支持 Polymer 芯和纸元素，并且可以针对任何 Web 组件进行配置。

于 2014-07-30T07:57:32.387 回答
1

我相信这就是您正在寻找的简单透明的 2 路数据绑定和扩展至更多自定义元素的能力，并且适用于 javascript 而不是 dart

NG 聚合物元素

于 2014-08-15T15:36:47.103 回答
0

这是我的工作解决方案，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
于 2014-08-07T04:14:45.243 回答
0

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

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>
于 2015-10-03T04:38:28.953 回答