带有 tds 的递归 angularjs 指令，必须只有一个根元素

Question

我正在处理带有嵌套通用对象的表。 我想创建一个包含 tr 的指令，然后在该行下方使用当前对象子项再次调用该指令。

我的主视图如下所示：

            <table class="table ap-table planning_table noselect" id="planningTableNew">
                <thead>
                  <tr>....</tr>
                </thead>
                <thead ng-repeat-start="item in projectVm.viewModel" style="display:none"></thead>
                <tbody planning-list-data item="item" periodes-displayed="periodesDisplayed"></tbody>
                <thead ng-repeat-end style="display:none"></thead>

            </table>

我看起来像这个指令：

(function () {
angular.module('appProjects').directive('planningListData', [function () {
    return {
        restrict: "A",
        replace: true,
        scope: {
            parentId: "@",
            item: "=item",
            periodesDisplayed: "=periodesDisplayed",
        },
        templateUrl: '/App/Planning/Directive/PlanningListDataView.html'
    }
}
]);

}());

还有我的指令模板：

<tr>
    <td class="no_input text-align-right td-fixed td-fixed-margin">{{item.identRowId}}</td>
    <td class="no_input"><i class="fa fa-square-o" aria-hidden="true"></i>&nbsp{{item.identName}}</td>
</tr>
<tr ng-repeat-start="child in item.childWebModel" style="display:none"></tr>
    <tr planning-list-data item="child" periodes-displayed="periodesDisplayed"></tr>
<tr ng-repeat-end style="display:none"></tr>

当我尝试这样做时，我得到了错误：

错误：[$compile:tplrt] 指令“planningListData”的模板必须 只有一个根元素。

我明白为什么这是一个问题，但我似乎无法弄清楚如何解决它。 到目前为止，我尝试过的每一个解决方案都会把桌子弄得一团糟。

我发现的唯一解决方法是每次都从主视图调用指令，但这在主 html 视图中为我提供了这种结构。

<tr ng-repeat-start="item in projectVm.viewModel" style="display:none"></tr>
                        <tr planning-list-data item="item" periodes-displayed="periodesDisplayed"></tr>
                            <tr ng-repeat-start="child in item.childWebModel" style="display:none"></tr>
                                <tr planning-list-data item="child" periodes-displayed="periodesDisplayed"></tr>
                                    <tr ng-repeat-start="subChild in child.childWebModel" style="display:none"></tr>
                                        <tr planning-list-data item="subChild" periodes-displayed="periodesDisplayed"></tr>
                                            <tr ng-repeat-start="subSubChild in subChild.childWebModel" style="display:none"></tr>
                                                <tr planning-list-data item="subSubChild" periodes-displayed="periodesDisplayed"></tr>
                                                    <tr ng-repeat-start="subSubSubChild in subSubChild.childWebModel" style="display:none"></tr>
                                                        <tr planning-list-data item="subSubSubChild" periodes-displayed="periodesDisplayed"></tr>
                                                    <tr ng-repeat-end style="display:none"></tr>
                                            <tr ng-repeat-end style="display:none"></tr>
                                    <tr ng-repeat-end style="display:none"></tr>
                            <tr ng-repeat-end style="display:none"></tr>
                    <tr ng-repeat-end style="display:none"></tr>

这并不完全合适，因为我不知道嵌套对象的深度。

他们有办法做到这一点吗？还是我必须使用丑陋且不可维护的解决方案？

Answer 1

希望这会有所帮助。一个表格，它绘制行，然后将子项绘制为新表格，其中包含 ng-repeat-start 和 ng-repeat-end 的行。

我认为在您的情况下，您对何时使用 <td> 感到困惑，而且这里的技巧是 colspan 999 以确保使用整行来绘制新表格；但是，这不是强制性的，您可以简单地在单元格中绘制新表格<td>

plnkr link

Answer 2

对您的 html 进行这些更改：-

<table class="table ap-table planning_table noselect" id="planningTableNew">
    <thead>
        <tr>....</tr>
    </thead>
    <thead ng-repeat-start="item in projectVm.viewModel" style="display:none"></thead>
    <tbody>
        <planning-list-data item="item" periodes-displayed="periodesDisplayed"></planning-list-data>
    </tbody>
    <thead ng-repeat-end style="display:none"></thead>
</table>

以及对指令的这些更改：-

(function () {
 angular.module('appProjects').directive('planningListData', [function () {
return {
    restrict: "E",
    replace: true,
    scope: {
        parentId: "@",
        item: "=item",
        periodesDisplayed: "=periodesDisplayed",
    },
    templateUrl: '/App/Planning/Directive/PlanningListDataView.html'
}]);

我不确定，但希望这可行！