Angularjs 嵌套指令

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>

目前，在显示 navElem 之前，指令 navWrapper 中的所有标签都已关闭。有没有办法告诉 'navWrapper' 在关闭 'ul div' 之前包括所有子元素以达到所需的输出？

Answer 1

您可以在 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>'
    }
});

检查这个工作plunker

Angularjs 嵌套指令

Angularjs with nested directives

javascript

html

angularjs

nested

directive