компонент угловой таблицы строк в компоненте таблицы

Question

У меня есть компонент таблицы, из которого я хочу создать компоненты строки таблицы в качестве дочерних.

var documentsController = function() {}; 

var documentsComponent = { 
    template: '<div class="col-lg-12 col-md-12 tableDataContainer">' + 
      ' <table class="table">' + 
      ' <thead>' + 
      '  <tr>' + 
      '  <td>Name</td>' + 
      '  <td>Document Type</td>' + 
      '  </tr>' + 
      ' </thead>' + 
      ' <tr ng-repeat="document in vm.documents">' + 
      '  <document document="document"></document>' + 
      ' </tr>' + 
      ' </table>' + 
      '</div>', 
    controller: documentsController, 
    controllerAs: 'vm', 
    bindings: { 
     documents: '<' 
    } 
}; 

Вот моя таблица компонент строки:

module.component('documents', documentsComponent); 

var documentController = function() { 
}; 

var documentComponent = { 
    template: 
      ' <td>fl ={{vm.document}}</td>' + 
      ' <td>{{document.Name}}</td>', 
    controller: documentController, 
    replace: true, 
    controllerAs: 'vm', 
    bindings: { 
     document: '<' 
    } 
}; 

module.component('document', documentComponent); 

Проблема заключается в том, что разметка не является правильным. Документ находится за пределами таблицы:

<div class="col-lg-12 col-md-12 tableDataContainer"> 
    <document document="document" class="ng-isolate-scope"> 
     <tr> 
      <td class="ng-binding">fl =</td> 
      <td class="ng-binding"></td> 
     </tr> 
     </document> 
    <table class="table"> 
     <thead> 
      <tr> 
       <td>Name</td> 
       <td>Document Type</td>  
      </tr> 
     </thead> 
     <tbody><!-- ngRepeat: document in vm.documents --> 
     <tr ng-repeat="document in vm.documents" class="ng-scope"> 
     </tr> 
     <!-- end ngRepeat: document in vm.documents --> 
     </tbody> 
     </table> 
     </div> 

Кроме того, документ не получает передается компоненту строки, и я не знаю, почему.

Answer 1

Вид позднего ответа, но я надеюсь, что он все еще помогает кому-то. Потому что ничего, кроме td или th внутри тега tr, является «слишком» неверным html, и ваш браузер просто выбрасывает его.

Попробуйте это (не угловая или что-нибудь, что может повлиять на результат):

<table> 
 
<tbody> 
 

 
    <tr> 
 
    <td>td in row 1</td> 
 
    <div>div in row 1</div> 
 
    </tr> 
 

 
    <tr> 
 
    <td>td in row 2</td> 
 
    <div>div in row 2</div> 
 
    </tr> 
 

 
</tbody> 
 
</table>

td появится внутри таблицы по мере добавления строк, но div будет перемещен за пределами (в случае хром, до) таблицы в вашем браузере. Еще до того, как угловой имеет возможность проанализировать html.

В качестве обходного пути, вы можете использовать директиву с restrict: 'A', и шаблон, как это:

<tr ng-repeat="document in vm.documents" document="document"> 
</tr>