表中的递归指令

Question

我希望在表格中显示一些多级嵌套组及其元素。因此，我创建了以下模板和指令：

<script type="text/ng-template" id="groupRenderer.html">
<tr>
    <td>
        {{group.name}}
    </td>
</tr>
<tr ng-repeat="element in group.elements">
    <td>
        {{element.name}}
    </td>
</tr>

<group ng-repeat="group in group.subGroups"/>

app.directive('group', function() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: "groupRenderer.html"
    }
})

在我看来，我插入了我的表并开始递归指令调用。

<table>
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>
    <group ng-repeat="group in groups">
</table>

它不会以这种方式工作，因为AngularJS不允许您创建具有多个根节点的替换指令。

我的问题是实现所有组和元素都显示在表格中的最佳方法是什么。