Question

我在使用嵌套通用对象的表上工作。我想创建一个包含tr的指令，然后在该行下面再次使用当前对象child调用该指令。

我的主要观点如下：

            <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]指令的模板＆＃39; planningListData＆＃39;必须只有一个根元素。

我理解为什么是一个问题，但我似乎无法弄清楚如何解决它。到目前为止我尝试过的每一个解决方案都会让桌子变得混乱

我发现的唯一工作是每次都从主视图调用指令，但是这给了我在主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'
}]);

我不确定，但希望这有效！

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

2 个答案: