Beginner angularjs - including directive within directive

Question

This is probably as basic as it gets. I have some simple markup that's suppose to represent a list:

<unordered-list>
    <list-item></list-item>
    <list-item></list-item>
</unordered-list>

I also have two directives defined for unordered-list and list-item:

.directive('unorderedList', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<ul></ul>'
    };
})
.directive('listItem', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<li>Test</li>'
    }
});

Yet when I run this (http://jsfiddle.net/esWUD/), the only thing rendered is the <ul>. No <li>Test</li> elements render within the <ul>.

Why not don't they render?

Mikke · Accepted Answer · 2014-02-24 18:10:53Z

2

You'll need to use ngTransclude to allow directives to have sub-elements. Set transclude: true in unorderedList.

    transclude: true,
    template: '<ul ng-transclude></ul>'

Working fiddle.

edited Feb 24, 2014 at 18:10

answered Feb 24, 2014 at 18:02

Mikke

2,17717 silver badges22 bronze badges

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

2 Comments

core Over a year ago

I tried transclude: true without ng-transclude in the template and it didn't work. Does one always have to include ng-transclude in the template when they've already specified transclude: true?

Mikke Over a year ago

Yes, as far as I know. It can be bothersome, but gives greater control: you can have more complex templates, with a <div ng-transclude></div> somewhere in the template. I would personally love to see it working as we both initially expected.

Collectives™ on Stack Overflow

Beginner angularjs - including directive within directive

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related