javascript - Ng-transclude 不适用于表格元素

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 移到表格之外

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

干杯!

score 0 · Accepted Answer

这不是唯一的解决方案（我希望）。但是，我发现完成这项工作的唯一方法是使 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 元素中

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

或将 ng-transclude 放在桌子上

<table ng-transclude></table>

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

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

tl;博士

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

1 回答 1