AngularJS Nested Directives

Question

I would like to create a nested directive structure in Angular like

<aa>
    <bb>
        <cc></cc>
    </bb>
    <bb>
        <cc></cc>
    </bb>
</aa>

Each directive would print its content, so aa tags will print "A", bb tags will print "B" and cc tags will print "C". The problem is that the outer directive overwrites the inner ones so only the first directive is processed.

Here's a Fiddle. What am I missing?

ng-controller's. Have them talk together through services that return a JSON object, if you need them to — J-Dizzle
– J-Dizzle, Commented Dec 18, 2014 at 8:38
@LutzHorn Consider aa tags like Continents, bb tags like states and cc tags like cities, this will give you an example.. — Luca De Nardi
– Luca De Nardi, Commented Dec 18, 2014 at 8:41
@J-Dizzle I don't want to use controllers for this, so that who writes HTML doesn't have to care about controllers and viceversa — Luca De Nardi
– Luca De Nardi, Commented Dec 18, 2014 at 8:42
@LucaDeNardi Could you please edit your question and add an example that gives us an idea of what you want to do? — user1907906
– user1907906, Commented Dec 18, 2014 at 8:43

RJo · Accepted Answer · 2014-12-18 08:46:23Z

4

You are missing the ng-transclude from the templates

See http://jsfiddle.net/x3420fg1/1/

answered Dec 18, 2014 at 8:46

RJo

16.4k5 gold badges36 silver badges63 bronze badges

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

1 Comment

Luca De Nardi Over a year ago

Thank you, I just found out it by myself before you answered :) This is the solution anyways!

Collectives™ on Stack Overflow

AngularJS Nested Directives

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related