Dart中Angular和Polymer之间的对象绑定 [英] Object binding between Angular and Polymer in Dart
问题描述
我正在尝试将对象从 Angular 受控元素绑定到 Dart 中的 Polymer 元素.
要绑定的对象:
class Person {字符串名称;字符串姓氏;人(this.name,this.surname);}
高分子元素模板:
<聚合物元素名称="人物元素"><模板><风格>.label {字体粗细:粗体;}</风格><p><span class="label">姓名:</span>{{person.name}}<span class="label">姓氏:</span>{{person.surname}}</p>模板><script type="application/dart" src="person_element.dart"></script></聚合物元素>
高分子元素代码:
import 'package:polymer/polymer.dart';导入person.dart";@CustomTag('person-element')类 PersonElement 扩展了 PolymerElement {@published 人 人;PersonElement.created() : super.created();}
在 Angular 中,我创建了一个控制器和一个模块:
@Controller(选择器:'[人容器]',发布为:'ctrl')类人控制器{列表<人>people = [new Person('John','Smith'), new Person('Mario','Rossi')];}类 PersonModule 扩展模块 {人模块(){绑定(人控制器);}}
尝试的第一个解决方案是使用 angular_node_bind 包:
<h2>人物元素</h2><div ng-repeat="person in ctrl.persons"><div>{{person.name}}</div><person-element person="[[person]]"></person-element>
当我在 Dartium 中运行应用程序时,出现此错误:
异常:String"类型不是value"的Person"类型的子类型.(http://localhost:8080/person_element.dart:6)
我也试过这样修改html代码中的属性实例化:
</person-element>
但我得到了同样的例外.
angular_node_bind 包是否支持对象绑定?
第二种解决方案是使用 Angular 0.14.0 的新绑定特性 并以这种方式绑定聚合物元素:
使用这个解决方案,我没有得到任何异常,元素是可视化的,但字段为空,人员实例为空.
完整示例在这里:https://github.com/fedy2/dart-angular-polymer-object-data-binding
新版 AngularDart (0.14.0) 支持 Polymer-Dart 绑定 (http://blog.angulardart.org).目前,不同版本可能存在一些问题:发布失败,[1] 解决依赖项... code_transformers 上的版本约束不兼容
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
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
这篇关于Dart中Angular和Polymer之间的对象绑定的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!