数据绑定角和聚合物镖

Question

我无法通过角度控制将列表传递给聚合物元素

聚合物元素

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"];

角聚合物数据结合

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

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

影子根：

修改：

现在我使用节点绑定模块和[[]]进行绑定，仍然无法通过List对象

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

错误：

  

例外：输入＆＃39; String＆＃39;不是类型＆＃39;列表＆＃39;的子类型。的   ＆＃39;值＆＃39 ;.   （落镖聚合物元素与 - 角/ LIB /元件/的HelloWorld / helloworld.dart：10）   插值：＆＃34; ng-binding＆＃34;

Answer 1

您需要使用angular_node_bind包。

请参阅Angular and Polymer Data Binding, Together!

将依赖项添加到pubspec.yaml：

dependencies: 
  angular_node_bind: any

init Polymer.run()

中的Angular

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

使用双方括号表示绑定表达式

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

angular_node_bind包的源代码还包含一个示例