Binding Angular to Polymer

I am mildly concerned that I am less than a month away from the release of Patterns in Polymer while still having so many outstanding questions. That said, all I can do is answer one question tonight and hope the rest take care of themselves in the days to come. And tonight's question is, how do I get data out of Polymer?

I already answered this question in the Dart version of Polymer.dart. Hopefully the answer in JavaScript will be similarly easy.

This turns out to be not quite so easy, however. I try the obvious approach—binding Angular variables:

<h3>Oooh! Let's make beautiful pizza together</h3>

<pre ng-bind="value">
</pre>

<p>
  <x-pizza state="{{value}}"></x-pizza>
</p>

But I wind up with nothing in the <pre> element even though the state attribute in <x-pizza> is definitely updated:



And I have to admit that I am stumped here. No matter what I try in the Polymer use (ng-state, ng-attr-state, etc). I cannot seem to get Angular to recognize this as an attribute—at least not as an attribute that is being updated.

I know that this works when changes are pushed down into Polymer. There is a nice little demo that describes it. In fact, I can see this here. If I add an ng-model INPUT element, I can update the value of the pizza state down in the Polymer. But when the Polymer in turn updates its state, Angular is not seeing the change.

Bother. Even trying to set $scope.watch() on the attribute seems to have no effect. It seems that I may have to dig further than I would have liked into this.

Day #1,007

‹prev | My Chain | next›