Polymer web component attribute value not getting passed down

Question

I have started out my own little WebComponents library at Github, and it all works well by it self when tested.

<!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>

This would render the component like this

enter image description here

This snippet shows how the web component should be used, and the cronValue is correctly picked up and used inside the web component. However when I try to use the web component in another project I have on Github, only null is passed down to the web component.

websync client side uses angularjs together with Polymer web components.

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

Here I am trying to bind a angular scope value to the cronValue attribute, but a log statement inside the web component shows that nothing is picked up. I have added a log statement in my directive exposing the task.schedule.time value, and it is not null.

Somewhere in between the value is not correctly bound to the web component by angular.

I found this project while researching and trying to resolve the matter, angular-bind-polymer. But that only helps changes made to the value inside the web component to be picked up by angular, which it also doesn't do even with this directive.

I now turn to you (StackOverflow), in hopes of figuring out why the angular web component binding isn't working.

EDIT:

I have now also tried angu-poly and it's also not working.

Im not sure but I think the capital V in cronValue was the issue. I converted the WebComponent to an Angular.js directive and had the same issue, after going for all lowercase cronvalue it started working again. I guess that was the issue for the WebComponent as well. — furier

furier furier · Accepted Answer · 2014-08-19T09:07:02

Seems like changing the attribute name from cronValue to cronvalue solved the issue, now angular-bind-polymer and angu-poly works just fine.

In the Polymer documentation it says:

It’s worth noting that the HTML parser considers attribute names case insensitive. Property names in JavaScript are however case sensitive.

This means that attributes can be written any way that you like, but if you look at an element’s attribute list, the names will always be lowercase. Polymer is aware of this and will attempt to match the attributes to properties carefully. For example, this should work as expected:

This is probably true for Polymer but together with angular.js the two way binding seems to fall apart and don`t work.

Polymer web component attribute value not getting passed down

1 Answers