Object binding between Angular and Polymer in Dart

I'm trying to bind an object from an Angular controlled element to a Polymer element in Dart.

The object to bind:

class Person {
  String name;
  String surname;

  Person(this.name, this.surname);
}

The polymer element template:

<link rel="import" href="packages/polymer/polymer.html">

<polymer-element name="person-element">
  <template>
    <style>
     .label {font-weight: bold;}
    </style>
    <p>
      <span class="label">Name: </span>{{person.name}}
      <span class="label">Surname: </span>{{person.surname}}
    </p>
  </template>
  <script type="application/dart" src="person_element.dart"></script>
</polymer-element>

The polymer element code:

import 'package:polymer/polymer.dart';
import 'person.dart';

@CustomTag('person-element')
class PersonElement extends PolymerElement {
  @published Person person;

  PersonElement.created() : super.created();
}

In Angular I've created a controller and a module:

@Controller(
    selector: '[person-container]',
    publishAs: 'ctrl')
class PersonController { 
  List<Person> persons = [new Person('John','Smith'), new Person('Mario','Rossi')];
}

class PersonModule extends Module {
  PersonModule() {
    bind(PersonController);
  }
}

The first solution tried is using the angular_node_bind package:

<div person-container ng-cloak>
  <h2>Person elements</h2>
  <div ng-repeat="person in ctrl.persons">
    <div>{{person.name}}</div>
    <person-element person="[[person]]"></person-element>
  </div>
</div>

When I run the application in Dartium I get this error:

Exception: type 'String' is not a subtype of type 'Person' of 'value'. (http://localhost:8080/person_element.dart:6)

I've also tried to modify the attribute instantiation in the html code in this way:

<person-element person=[[person]]></person-element>

But I get the same exception.

The angular_node_bind package supports the object binding?

The second solution is using the new binding features of Angular 0.14.0 and binding the polymer element in this way:

With this solution I don't get any exception, the element is visualized but the fields are empty and the person instance null.

The complete example is here: https://github.com/fedy2/dart-angular-polymer-object-data-binding

回答1:

The new version of AngularDart (0.14.0) has a support for Polymer-Dart binding (http://blog.angulardart.org). At the moment there can be some problems with different versions: Pub get failed, [1] Resolving dependencies... Incompatible version constraints on code_transformers

回答2:

You can find examples at

https://github.com/angular/angular.dart/pull/1461/files
https://github.com/angular/angular.dart/tree/master/example/web
- https://github.com/angular/angular.dart/blob/master/example/web/paper.html
- https://github.com/angular/angular.dart/blob/master/example/web/paper.dart
- https://github.com/angular/angular.dart/blob/master/example/web/paper_radio_group.html
- https://github.com/angular/angular.dart/blob/master/example/web/paper_radio_group.dart

also have a look at the same files in the sept15-prg branch.

the new syntax seems to be like

<person-element bind-person="person"></person-element>

It is possible that the released Angular version doesn't yet support some things used by this examples.