我在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>
这将使组件像这样
该代码段显示了如何使用Web组件,以及如何cronValue
正确地在Web组件内部拾取和使用。但是,当我尝试在Github上的另一个项目中使用Web组件时,只会传递给Web组件。null
Websync客户端将angularjs与Polymer Web组件一起使用。
<ss-scheduler cronValue="{{task.schedule.time}}" ng-class="{hidden: !task.schedule.enabled}"></ss-scheduler>
在这里,我试图将角度范围值绑定到该cronValue
属性,但是Web组件内的log语句显示未拾取任何内容。我在指令中添加了一个log语句以暴露该task.schedule.time
值,但不是null
。
介于两者之间的某个位置未通过angular将值正确绑定到Web组件。
我在研究并尝试解决问题的过程中找到了这个项目,即角结合聚合物。但这仅有助于对web组件内部的值所做的更改以角度进行拾取,即使使用此指令也不会这样做。
现在,我转向您(StackOverflow),希望弄清楚为什么有角度的Web组件绑定无法正常工作。
编辑:
我现在也尝试过angu-poly,但也无法正常工作。
好像更改属性名称cronValue
来cronvalue
解决这个问题,现在angular-bind-polymer
和angu-poly
工作得很好。
值得注意的是,HTML解析器认为属性名称不区分大小写。但是,JavaScript中的属性名称区分大小写。
这意味着可以使用任何您喜欢的方式来编写属性,但是如果您查看元素的属性列表,则名称将始终为小写。Polymer意识到这一点,将尝试将属性与属性进行仔细匹配。例如,这应该按预期工作:
这可能对Polymer来说是正确的,但与angular.js一起,两种方式的绑定似乎分崩离析,无法正常工作。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句