javascript - 初学者 angularjs - 在指令中包含指令

Question

这可能是最基本的。我有一些简单的标记，应该代表一个列表:

<unordered-list>
    <list-item></list-item>
    <list-item></list-item>
</unordered-list>

我还为 unordered-list 定义了两个指令和list-item :

.directive('unorderedList', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<ul></ul>'
    };
})
.directive('listItem', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<li>Test</li>'
    }
});

然而，当我运行这个( http://jsfiddle.net/esWUD/ )时，唯一呈现的是 <ul> 。 。否<li>Test</li>元素在 <ul> 内渲染.

为什么不渲染？

Answer 1

您需要使用ngTransclude允许指令有子元素。在 unorderedList 中设置 transinclude: true。

    transclude: true,
    template: '<ul ng-transclude></ul>'

工作中fiddle .