Polymer-AngularJS 双向数据绑定答案

【问题标题】：Polymer-AngularJS two-way data bindingPolymer-AngularJS 双向数据绑定
【发布时间】：2014-05-09 11:49:24
【问题描述】：

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

谢谢

【问题讨论】：

您的聚合物元素模板在 html 标签中的什么位置？
哦，我想我明白了，不过你有一个错字，x-inut 应该是 x-input
感谢更正，但这不是问题。
我认为主要问题是当kid.name 或kid.age 的值发生变化时，您没有调用$scope.apply。除非您使用 apply，否则 Angular 不知道范围内的内容会发生变化。您还需要将实际的 kid 对象传递给聚合物元素，而不仅仅是它作为属性的字符串，以便您可以更改 angular 知道的对象的属性。
@testuser 你能展示如何将对象传递给聚合物元素吗？

标签： javascript angularjs element polymer shadow-dom

【解决方案1】：

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

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

【讨论】：

无法绑定对象。它与第三方库有关吗？看看这个 SO：stackoverflow.com/q/24340258/1691423

【解决方案2】：

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

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

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

【讨论】：

像宣传的那样工作（不要忘记将它添加到您的模块依赖项中）
我没有成功使用这个和自定义元素。另外，它是否支持对象和数组？我只能让字符串工作。

【解决方案3】：

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

NG Polymer Elements

【讨论】：

是否支持对象和数组？
我不太清楚你所说的对象和数组是什么意思该库目前解决了混合角度和聚合物元素的一些常见问题（2 路数据绑定、ng cloak、ng-repeat 等）支持 core-elements 和 paper-elements 并提供文档以将其他 web 元素添加到支持列表中
根据文档，您可以通过简单的设置添加对自定义聚合物元素的支持
我没有成功。另外，它是否支持对象和数组？目前使用其他库 angular-bind-polymer 我只能让字符串工作。

【解决方案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

【讨论】：

【解决方案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>

【讨论】：