Question

我正在尝试为表格构建一个显示数据的指令。

该表有标题和正文。

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

<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><div ng-transclude></div></table>

浏览器将ng-transclude div移到表格之外

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

干杯！

Answer 1

这不是唯一的解决方案（我希望）。但是，我发现使这项工作的唯一方法是使my-table的tempate成为

<tbody ng-transclude>
</tbody>

然后在标记中将指令指定为表的属性

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

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

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

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

或将ng-transclude放在桌子上

<table ng-transclude></table>

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

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

<强> TL;博士

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

<tbody>