tds를 갖는 재귀 angularjs 지시문은 정확히 하나의 루트 요소를 가져야합니다.

Question

중첩 된 일반 객체가있는 테이블에서 작업하고 있습니다. tr을 포함하는 지시문을 만들고 그 행 아래에 현재 객체 children을 사용하여 지시문을 다시 호출하려고합니다.

내 기본보기는 다음과 같습니다 :이 지시어와 같은

  <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> 

, 나는 오류 얻을 :

Error: [$compile:tplrt] Template for directive 'planningListData' must have exactly one root element.

나는이 문제가되는 이유를 이해를하지만 난 수없는 것 그 문제를 해결하는 방법을 찾아야합니다. 지금까지 해본 모든 솔루션이 테이블을 엉망으로 만듭니다.

내가 발견 한 유일한 해결 방법은 매번 기본보기에서 지시문을 호출하는 것이지만 기본 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가 있다고 생각합니다. 그러나, 필수하지 이잖아, 당신은 단순히 당신이 HTML로 <td>

plnkr link

Answer 2

이러한 변경 작업을 수행 셀에 새 테이블을 그릴 수 있습니다 : -

<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' 
}]); 

본인은 확실하지만 희망이 있습니다!.