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来允许指令包含子元素。在transclude: true中设置unorderedList。

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

工作fiddle。

初学者angularjs - 包括指令内的指令

1 个答案: