Can't Bind Polymer.dart with Angular.dart's Built-In Syntax

I was able to get double binding working between Angular.dart and Polymer.dart last night, thanks mostly to the angular_node_bind directive. For demonstration, I bind the JSON from the <x-pizza> Polymer element into an Angular scope variable for display:



Jyrki Grohn was kind enough to remind me that there should be an easier way to accomplish this in Angular.dart version 0.14 (which I am using). Angular.dart now boasts bind-* syntax for double binding properties between Angular.dart and Polymer. So let's see how it works.

Unfortunately, it does not work for me. The angular_node_bind stuff worked by wrapping the Angular scope variable inside double square brackets:

<pre>{{ pizzaState }}</pre>
<p>
  <x-pizza value="[[ pizzaState ]]"></x-pizza>
</p>

In this case, the <x-pizza> element's value was reflected in Angular's pizzaState scope variable.

But if I try the bind-* syntax instead:

<pre>{{ pizzaState }}</pre>
<p>
  <x-pizza bind-value="pizzaState"></x-pizza>
</p>

Now the binding is not working:



And I cannot figure this one out. My default setting for value is to make it a reflectable published property:

@CustomTag('x-pizza')
class XPizza extends PolymerElement {
  // ...
  @PublishedProperty(reflect: true)
  String value;
  // ...
}

I also try vanilla @published and @observable—all for naught. No matter what I do this value is not reflected back to Angular.

I may dig into this more tomorrow—specifically examining the example code that illustrates working bind-* semantics. Then again, I have a working solution and it happens to mimic the JavaScript solution also presented in Patterns in Polymer, so I may just leave well enough alone.


Day #197

‹prev | My Chain | next›