data binding angular and polymer dart

Question

I am not able to pass list to polymer element from angular control

polymer element

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;

Angular control

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

Angular polymer data binding

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

message is displaying fine on browser,but not list data.

shadow root :

enter image description here

Edit :

Now i am using node bind module and [[]] for binding ,still can't pass List object

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

Error :

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"

Günter Zöchbauer · Accepted Answer · 2014-05-09 14:07:50Z

4

You need to use the angular_node_bind package.

See Angular and Polymer Data Binding, Together!

add the dependency to pubspec.yaml:

dependencies: 
  angular_node_bind: any

init Angular inside Polymer.run()

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

use double square brackets for binding expressions

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

The source code of the angular_node_bind package also contains an example

edited May 9, 2014 at 14:07

answered May 9, 2014 at 5:20

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

9 Comments

invariant Over a year ago

when i used NodeBindModule ,applicationFactory().addModule(new AppModule()).addModule(new NodeBindModule()).run(); ,I am getting following error Internal error: 'package:angular_node_bind/angular_node_bind.dart': malformed type: line 42 pos 2: type 'NgDirective' is not loaded @NgDirective(selector: r'[*=/[[.*]]/]') ^

Günter Zöchbauer Over a year ago

Can you please file an issue in the angular_node_bind packags? I guess it is not updated to the most recent AngularDart version.

Justin Fagnani Over a year ago

Ok, I fixed angular_node_bind for the latest Angular.dart. Thanks @invariant!

invariant Over a year ago

@JustinFagnani now 'NgDirective' is not loaded error gone ,but i am still not able to pass list object ...

Fedy2 Over a year ago

Done: stackoverflow.com/questions/25807193/…

|

Collectives™ on Stack Overflow

data binding angular and polymer dart

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related