Question

我尝试将角色控制元素中的对象绑定到Dart中的Polymer元素。

要绑定的对象：

class Person {
  String name;
  String surname;

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

聚合物元素模板：

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

聚合物元素代码：

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

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

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

在Angular中，我创建了一个控制器和一个模块：

@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);
  }
}

第一个解决方案尝试使用angular_node_bind包：

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

当我在Dartium中运行应用程序时，我收到此错误：

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

我也试图以这种方式修改html代码中的属性实例化：

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

但我得到同样的例外。

angular_node_bind包支持对象绑定？

第二个解决方案正在使用new binding features of Angular 0.14.0并以这种方式绑定聚合物元素：

使用此解决方案，我不会得到任何异常，元素可视化但字段为空且person实例为null。

完整的示例如下：https://github.com/fedy2/dart-angular-polymer-object-data-binding

Answer 1

新版AngularDart（0.14.0）支持Polymer-Dart绑定（http://blog.angulardart.org）。目前，不同版本可能存在一些问题： Pub get failed, [1] Resolving dependencies... Incompatible version constraints on code_transformers

Answer 2

您可以在

找到示例

还可以查看sept15-prg分支中的相同文件。

新语法似乎就像

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

发布的Angular版本可能还不支持此示例使用的一些内容。

Dart中Angular和Polymer之间的对象绑定

2 个答案: