Ng-transclude 不适用于 table 元素

Question

我正在尝试为 table 构建指令以显示数据。

table有一个header和一个body。

理想情况下，我希望有以下指令：

<div my-table></div>
<div my-table-header></div>
<div my-table-body></div>

以便我可以将它们与 ng-transclude

一起使用

<div my-table>
    <div my-table-header></div>
    <div my-table-body></div>
</div>

但是，这不适用于 my-table 的以下模板：

<table class="table" ng-transclude></table>

页面呈现时，我得到以下结果：

<div my-table="" class="ng-scope">



            1
            2




            a
            b



        </div>

我看到有人提到 ng-transclude 不能很好地与 table 一起使用。例如，如果您输入

<table><div ng-transclude></div></table>

浏览器将 ng-transclude div 移到 table

之外

我想知道是否有人有解决这个问题的经验，因为这似乎是一件很合理的事情。

干杯！

Answer 1

这不是唯一的解决方案（我希望如此）。但是，我发现完成这项工作的唯一方法是将 my-table 的模板设为

<tbody ng-transclude>
</tbody>

然后在标记中将指令指定为 table

上的属性

<table my-table>
    <my-table-header></my-table-header>
    <my-table-body></my-table-body>
</table>

这是我能够完成这项工作的唯一形式。

将 my-table 模板包装在 table 元素中

<table>
    <tbody ng-transclude></tbody>
</table>

或将 ng-transclude 放在 table 本身

<table ng-transclude></table>

然后将其实例化为 div 上的属性或作为元素根本不起作用

<div my-table></div>
<my-table></mytable>

tl;dr

这个解决方案有效，但我不喜欢它，原因如下：

E

A

<thead>

Ng-transclude not working with table element