Javascript 带有嵌套指令的Angularjs

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

app.directive（'navWrapper'，function（）{
返回{
限制：'E'，
替换：正确，
范围：{
标题：“@”
},
模板：'
{{{：：title}}
'
}
});
应用指令（'navElem'，函数（）{
返回{
限制：'E'，
替换：正确，
范围：{
值：“@？”
},
模板：'
{{{：：value}
'
}
});

输出：

<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>

电子邮件测试


首先
第二

---

目前，指令navWrapper中的所有标记在显示导航元素之前都已关闭。在关闭“ul div”之前，是否有方法告诉“navWrapper”包括所有子元素以达到所需的输出？

您可以在

nav wrapper

指令中使用

transclude:true

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

app.directive（'navWrapper'，function（）{
返回{
限制：'E'，
替换：正确，
是的，
范围：{
标题：“@”
},
模板：'
{{{：：title}}
'
}
});

检查这个工作状态