html - 带有指令的AngularJS表行

Question

我正在尝试使用 angularjs 指令来渲染表格。我想要的输出是在 tbody 中有子 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 可以再次生孩子。你明白了。

这是我尝试和观察到的。

我在 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）根本没有渲染，也没有控制台错误。

标签： htmlangularjshtml-table