Javascript 将指令模板添加到表中

我有一种情况，当我需要在一个表中重复多个tbody时，我试图做的是使每个tbody指令和我希望它的模板附加到表中，但是当我把指令放在表标记内时，它会把它的内容放在表外

cart draw指令：

return {
    restrict   : 'AE',
    templateUrl: 'client/cart/views/cart-draw.html',
    scope      : {},
    replace: true,
    controller : controller
  }

第三方物流：

<tbody ng-repeat="draw in CartService.items.draws track by $index">

  <tr>
    <td>
      //some content
    </td>
  </tr>
</tbody>

//一些内容

html：

<table class="table">

  <cart-draw></cart-draw>

</table>

这是plunker，如果您检查元件，您将看到tbody不在表中：

---

这是Angular的Github回购中一个长期悬而未决的问题

我也曾经偶然发现过这个问题（使用SVG）。之所以会出现这种情况，是因为在呈现指令之前，模板与HTML DTD进行了交叉验证，并且单独验证没有意义（没有标记），因此无法工作。这同样适用于

和

---

有许多解决方案使用

ng transclude

和

link

函数将其包装在各自的父标记中，然后使用它。

这是因为

标记无法将自定义

元素识别为有效的子元素

我想这样修改：

index.html

<table><tbody cart-draw></tbody></table>

<tbody ng-repeat="body in bodies">
  <tr>
    <td>
      {{body}}
    </td>
  </tr>
</tbody>

---

当涉及到指令时，这实际上是一个已知且奇怪的问题

我相信它一开始是以

无效的
HTML的形式出现的，导致它以某种方式出现在
标记之外

尝试使购物车绘制一个
属性：




这将使它按预期工作。
你不明白我的问题JS小提琴会有帮助！你明白了：）更新的问题
$scope.bodies = ["hello1", "hello2", "hello3"];

<table>
  <tbody cart-draw></tbody>
</table>