聚合物 Web 组件属性值未传递答案

【问题标题】：Polymer web component attribute value not getting passed down聚合物 Web 组件属性值未传递
【发布时间】：2014-09-30 15:23:13
【问题描述】：

我已经在Github 开始了我自己的小型WebComponents 库，并且在测试时它自己运行良好。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WebComponents</title>
    <script src="bower_components/platform/platform.js"></script>
    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="bower_components/WebComponents/components/scheduler/ss-scheduler.html">
</head>
<body>
    <ss-scheduler cronValue="0 0 0 0 *"></ss-scheduler>
</body>
</html>

这会像这样渲染组件

这个 sn-p 显示了应该如何使用 web 组件，并且cronValue 被正确拾取并在 web 组件 中使用。但是，当我尝试在 Github 上的另一个项目中使用 web 组件 时，只有 null 被传递给 web 组件。

websync 客户端使用angularjs 和Polymer 网络组件。

<ss-scheduler cronValue="{{task.schedule.time}}" ng-class="{hidden: !task.schedule.enabled}"></ss-scheduler>

这里我试图将 angular scope 值绑定到 cronValue 属性，但是 web 组件 内的日志语句显示没有拾取任何内容。我在我的指令中添加了一个日志语句，暴露了task.schedule.time 值，它不是null。

值之间的某个位置未通过 angular 正确绑定到 web 组件。

我在研究和尝试解决问题时发现了这个项目，angular-bind-polymer。但这只会有助于对 web 组件 内的值所做的更改被 angular 拾取，即使使用此指令也无法做到这一点。

我现在求助于您 (StackOverflow)，希望找出 angular Web 组件绑定 不起作用的原因。

编辑：

我现在也尝试了angu-poly，但它也不起作用。

【问题讨论】：

我不确定，但我认为cronValue 中的大写V 是问题所在。我将WebComponent 转换为Angular.js directive 并遇到了同样的问题，在使用所有小写cronvalue 之后它又开始工作了。我想这也是WebComponent 的问题。

标签： angularjs polymer web-component

【解决方案1】：

似乎将属性名称从cronValue 更改为cronvalue 解决了这个问题，现在angular-bind-polymer 和angu-poly 工作正常。

In the Polymer documentation it says:

值得注意的是，HTML 解析器会考虑属性名称的大小写不敏感。然而，JavaScript 中的属性名称区分大小写。

这意味着属性可以写成任何你喜欢的方式，但是如果您查看元素的属性列表，名称将始终是小写。 Polymer 意识到了这一点，并将尝试匹配属性属性仔细。例如，这应该作为预期：

这对于 Polymer 可能是正确的，但与 angular.js 一起，这两种方式的绑定似乎分崩离析并且不起作用。

【讨论】：