tdsを持つ再帰的なangularjsディレクティブは、ちょうど1つのルート要素を持っていなければなりません。

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> 

、私はエラーを取得する：ある理由を私は理解して

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を使用して、新しいテーブルを作成するために行全体が確実に使用されていることを確認してください。ただし、必須ではありませんthatsの、あなたは、単にセルに<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' 
}]); 

私は確信していませんが、これがうまくいきます！