Question

我有一种情况，当我需要在一个表中重复多个tbody时，我想要做的是制作每个tbody指令并且我希望它的模板附加到表中，但是当我把指令放在表标签里面时它放了他的内容在桌子外面。

购物车绘图指令：

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

tpl：

<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不在表中： http://plnkr.co/edit/9wEGFE5K0w0ayp6qo8Lx?p=preview

Answer 1

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

https://github.com/angular/angular.js/issues/1459

我偶然发现了这个问题（使用SVG）。之所以发生这种情况，是因为在渲染指令之前，模板是通过 HTML DTD 交叉验证的，并且单独没有意义（没有标记），因此它不起作用。同样适用于<tr>和<li>

有许多解决方案使用ng-transclude和link函数将其包装在相应的父标记中，然后使用它。

Answer 2

这种情况正在发生，因为<table>代码无法将您的自定义<cart-draw>元素识别为有效子代。

我会像这样修改：http://plnkr.co/edit/u88N76h5dvLAvR3C1kRs?p=preview

<强>的index.html

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

<强>推车draw.html

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

<强> app.js

$scope.bodies = ["hello1", "hello2", "hello3"];

Answer 3

这实际上是一个已知的＆amp;关于指令的一个奇怪的问题＆amp; <table>＆＃39; S

我认为它最初以invalid HTML格式出现，导致它以某种方式出现在<table>标记之外。

尝试购物车绘制<tbody>的属性：

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

<强> plunker Example

这将使其按预期工作。

Angular将指令模板附加到表

3 个答案: