CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
core
core

Reputation: 33079

Beginner angularjs - including directive within directive

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?

Upvotes: 2

Views: 59

Answers (1)

Mikke
Mikke

Reputation: 2167

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.

Upvotes: 2

Related Questions