CODEWITHSUNDEEP
dartdart-polymerpolymerangular-dart
invariant
invariant

Reputation: 8900

data binding angular and polymer dart

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"

Upvotes: 3

Views: 600

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658057

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

Upvotes: 4

Related Questions