Angularjs with nested directives

Question

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?

Shripal Soni · Accepted Answer · 2015-01-30 09:11:55Z

2

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

answered Jan 30, 2015 at 9:11

Shripal Soni

2,44819 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

Angularjs with nested directives

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related