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>'
    }
});

输出：

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

期望的输出：

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

目前，在显示navElems之前，指令navWrapper中的所有标记都已关闭。有没有办法告诉navWrapper＆＃39;在结束之前包括所有子元素＆＃39; ul div＆＃39;达到所需的输出？

Answer 1

您可以在transclude:true指令中使用nav-wrapper。

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>'
    }
});

检查此工作plunker

具有嵌套指令的Angularjs

1 个答案: