dart - 数据绑定(bind)角度和 polymer Dart

Question

我无法将列表从角度控制传递给 polymer 元素

polymer 元素

hellowworld.html

<polymer-element name = "hello-world" attributes ="message list">
 <template>
    {{message}}
  <template repeat ="{{item in list}}">
    {{item}}
  </template>
 </template>
<script type="application/dart" src="helloworld.dart"></script>
</polymer-element>

helloworld.dart

@CustomTag("hello-world")
class HelloWorld extends PolymerElement {

  @published String message;
  @published List<String> list;

角度控制

@Controller(selector :"[app-ctrl]", publishAs : "ctrl")
class AppController {
  String message = "polymer angular rocks";
  List<Person> _persons = [];
  List<String> list = ["dsdf","dsf"];

角度 polymer 数据绑定(bind)

<div app-ctrl>
    <hello-world message ="{{ctrl.message}}" list ="{{ctrl.list}}"></hello-world>
</div>

消息在浏览器上显示正常，但不是列表数据。

阴影根:

编辑:

现在我正在使用节点绑定(bind)模块和 [[]] 进行绑定(bind)，仍然无法传递 List 对象

 <div app-ctrl>
        <hello-world message ="[[ctrl.message]]" list ="[[ctrl.list]]"></hello-world>
    </div>

错误:

Exception: type 'String' is not a subtype of type 'List' of 'value'. (dart-polymer-elements-with-angular/lib/elements/helloworld/helloworld.dart:10) interpolation: "ng-binding"

Answer 1

您需要使用 angular_node_bind 包。

参见 Angular and Polymer Data Binding, Together!

将依赖添加到 pubspec.yaml:

dependencies: 
  angular_node_bind: any

在 Polymer.run() 中初始化 Angular

void main() {
  initPolymer().run(() {
    //ngBootstrap(module: new NodeBindModule());
    applicationFactory().addModule(new AppModule()).addMdoule(new NodeBindModule()).run();
  });
}

对绑定(bind)表达式使用双方括号

<my-element message="[[cool]]"></my-element>

angular_node_bind包的源代码也包含一个例子