How to pass a method to a directive and invoke it to pass data to a nested directive?

Question

I wrote a directive, list, that displays a list of items.

Then I wanted to reuse this component in another directive, wrapped-list that would modify the list (add some items, change some values), and add some cosmetic stuff around it.

The list expects a list of items as parameter, then, wrapped-list expects the same list, plus the method that will change the list values and content.

The issue occurs when I try to invoke the method from wrapped-list in order to pass the data to list.

See fiddle here.

I tried many crazy combinations, and could not make it work.

items="listFactory({items:items})"
items="listFactory(items)"
items="{{listFactory(items)}}"
...

No luck so far. Any idea?

Note: I could make it work with items="$parent.listBuilder(items)", but I don't want to depend on the parent's scope. Also, I know this will generate the $digest() iteration reached error, which is not part of this question!

You need to check your camelCase, you have listFactory in your scope and listFactory in your html. Your html should be list-factory. I just ran that in your fiddle and it worked. — Ohjay44, Apr 04 '16 at 16:07
No problem, just remember if you define a variable in camelCase then the html version of the camelCase needs to read camel-case. — Ohjay44, Apr 04 '16 at 16:12

score 0 · Accepted Answer · edited May 23 '17 at 11:50

0

As Ohjay44 commented it, the error is that listFactory should be referenced as list-factory in the HTML side.

edited May 23 '17 at 11:50

Community

1
1

answered Apr 08 '16 at 14:36

remio

1,242
2
15
36

How to pass a method to a directive and invoke it to pass data to a nested directive?

1 Answers1