CODEWITHSUNDEEP
javascripthtmlangularjsnesteddirective
Biberwerke
Biberwerke

Reputation: 133

Angularjs with nested directives

Index.html:

<nav-wrapper title="Email Test">
    <nav-elem value="first"></nav-elem>
    <nav-elem value="second"></nav-elem>
</nav-wrapper>

app.js:

app.directive('navWrapper', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            title: "@"
        },
        template: '<div class="wrapper"><p class="title">{{::title}}</p><ul>'
    }
});


app.directive('navElem', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            value: "@?"
        },
        template: '<li class="navElem">{{::value}}</li>'
    }
});

output:

<div class="wrapper">
    <p class="title">Email Test</p>
    <ul></ul>
</div>

desired output:

<div class="wrapper">
    <p class="title">Email Test</p>
    <ul>
        <li class="navElem">first</li>
        <li class="navElem">second</li>
    </ul>
</div>

Currently all tags in directive navWrapper are closed before the navElems are shown. Is there a way to tell 'navWrapper' including all child elements before the closing 'ul div' to reach the desired output?

Upvotes: 0

Views: 49

Answers (1)

Shripal Soni
Shripal Soni

Reputation: 2448

You can use transclude:true in your nav-wrapper directive.

app.directive('navWrapper', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {
            title: "@"
        },
        template: '<div class="wrapper"><p class="title">{{::title}}</p><ul ng-transclude></ul></div>'
    }
});

Check this working plunker

Upvotes: 2

Related Questions