Правильный рендеринг HTML в NgRepeat с использованием компонентов в AngularJS 1.7

Question

У меня есть простое приложение, которое отображает фрукты и их цвет внутри таблицы.Существует компонент таблицы и компонент строки.HTML-код компонента таблицы выглядит следующим образом:

<table class="table table-condensed">
  <thead>
    <tr>
      <th>Fruit</th>
      <th>Color</th>
    </tr>
  </thead>
  <tbody>
    <row-component fruit="fruit" ng-repeat="fruit in $ctrl.fruits"></row-component>
  </tbody>
</table>

HTML-код компонента строки выглядит следующим образом:

<tr>
  <td>{{$ctrl.fruit.name}}</td>
  <td>{{$ctrl.fruit.color}}</td>
</tr>

Как видите, компонент таблицы имеет директиву ngRepeat для компонента строки.,Проблема в том, что визуализированная разметка выглядит следующим образом:

<table-component class="ng-isolate-scope"><!-- ngRepeat: fruit in $ctrl.fruits --><row-component fruit="fruit" ng-repeat="fruit in $ctrl.fruits" class="ng-scope ng-isolate-scope"><tr>
  <td class="ng-binding">Apple</td>
  <td class="ng-binding">Red</td>
</tr></row-component><!-- end ngRepeat: fruit in $ctrl.fruits --><row-component fruit="fruit" ng-repeat="fruit in $ctrl.fruits" class="ng-scope ng-isolate-scope"><tr>
  <td class="ng-binding">Banana</td>
  <td class="ng-binding">Yellow</td>
</tr></row-component><!-- end ngRepeat: fruit in $ctrl.fruits --><row-component fruit="fruit" ng-repeat="fruit in $ctrl.fruits" class="ng-scope ng-isolate-scope"><tr>
  <td class="ng-binding">Pear</td>
  <td class="ng-binding">Green</td>
</tr></row-component><!-- end ngRepeat: fruit in $ctrl.fruits --><table class="table table-condensed">
  <thead>
    <tr>
      <th>Fruit</th>
      <th>Color</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table></table-component>

Браузер не знает, как обрабатывать тег компонента строки, и таблица в итоге выглядит так:

Что мне нужно сделать, чтобы строки правильно отображались?У меня есть полный код CodePen здесь .

Answer 1

Простым решением было бы преобразовать ваш компонент в директиву и добавить его к элементу tr в качестве атрибута.

<table class="table table-condensed">
  <thead>
    <tr>
      <th>Fruit</th>
      <th>Color</th>
    </tr>
  </thead>
  <tbody>
    <tr row-component fruit="fruit" ng-repeat="fruit in $ctrl.fruits"></tr>
  </tbody>
</table>

ПРИМЕЧАНИЕ.ваш пример, было бы лучше, если бы вы изменили его на что-то более подходящее, чем row-component, поскольку он больше не является компонентом.