1

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

2 Answers 2

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

Sign up to request clarification or add additional context in comments.

1 Comment

I've tried it using the polymer element in this way: <person-element person="person"></person-element> obtaining the same exception.
0

You can find examples at

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.

2 Comments

The paper examples in the github.com/angular/angular.dart/blob/master/example/web folder use the installed paper elements installed through bower under the bower_components folder. Can I use the same components from paper_elements package (pub.dartlang.org/packages/paper_elements)?
Sorry I missed that. I guess not. You can try to use the elements from this paper_elements package from the src/some-element subfolders. This are the original JS paper-elements.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.