Строки таблицы AngularJS с директивой - PullRequest
Новая
       16

Строки таблицы AngularJS с директивой

0 голосов
/ 11 июня 2019

Я пытаюсь получить таблицу для визуализации с помощью директив angularjs. Вывод, который я хочу получить, это иметь дочерний элемент tr и th внутри тела 

<table>
  <thead>
    <tr>COL 1</tr>
    <tr>COL 2</tr>
    <th col="2">Title 1</th>
  </thead>
  <tbody ng-repeat="i in [1, 2, 3, 4]">
    <tr>
      <td>i.name</td>
      <td>i.value</td>
    </tr>
    <tr></tr>
  </tbody>
</table>

Для приведенной выше таблицы у меня есть дочерний контент, который должен отображаться ниже любого tr. Дочерний контент имеет th и tr (th-й контент должен появляться только один раз над списком его элементов tr). И у этих детей тоже могут быть дети. Вы получаете точку.

Вот что я пробовал и наблюдал.

Я использовал директиву настраиваемого атрибута для элемента tr. 

app.directive('customDirective', ['$compile', function($compile){
  return {
    restrict: 'A',
    scope: {
      content: '='
    },
    link: function(scope, element) {
      // SOME LOGIC TO DECIDE IF THE TEMPLATE NEEDS TO BE RENDERED TO STOP MAX EXECUTION ERROR
      var template = '<tbody>
                        <th col="2">Title 1.1</th>
                        <tr custom-directive>
                          <td>content.name</td>
                          <td></td>
                        </tr>
                      </tbody>';
      element.parent().after($compile(template)(scope));
    }
  }
}]);

Первая проблема: мне нужно использовать тег tbody только во второй раз, чтобы использовать свойства CSS; Я не уверен, почему он не сохраняет свойства таблицы.

Вторая проблема: дочерний элемент второго уровня (Раздел 1.1.1) вообще не рендерится, и нет ошибок консоли.

...