Question

我想将表中的ng-repeat值传递给指令，但它不起作用。在custom-elememt指令中，我想将ng-repeat值传递给它，但它不是ng-repeat值。但是如果我在div中尝试相同的瘦，那么为什么我无法将ng-repeat值传递给表中的customer指令。

不工作

<tbody ng-repeat="entry in entries track by $index">
    <tr>
       <td>  {{ entry.id }}></td>
       <td>{{ entry.name }}</td>
    </tr>
    <products-table products="entry.products"></products-table>
</tbody>

工作

<div ng-repeat="entry in entries">
    <products-table products="entry.products"></products-table>
</div>

请找到演示

http://plnkr.co/edit/DFMvhm6CoZTs1PigloT3?p=preview

Answer 1

将您的指令放在表格单元格中。

<tbody ng-repeat="entry in entries track by $index">
    <tr>
        <td>
            <products-table products="entry.products"></products-table>
        </td>
    </tr>
</tbody>

Answer 2

由于 entry.products 是一个对象数组，你将不得不为此申请另一个ng-repeat。

您的代码将变为

<tbody ng-repeat="entry in entries track by $index">
  <tr ng-repeat="product in entry.products">
    <td>{{ product.id }}</td>
    <td>{{ product.name }}</td>
  </tr>
  <products-table products="entry.products"></products-table>
</tbody>

Answer 3

在表格中，tbody可以呈现tr中的内容。你不能在tr

之外渲染div或span之类的任何元素

<tbody ng-repeat="entry in entries track by $index">
    <tr>
        <td>  {{ entry.id }}></td>
        <td>{{ entry.name }}</td>
        <td><products-table products="entry.products"></products-table><td>
    </tr>
</tbody>

Answer 4

根据spec，TBODY元素只能包含TR元素。例如，如果你在<div>foo</div>内写<tbody>，那么DOM只需渲染它并将元素粘贴到你的表格上方（正如你在plunkr中看到的那样）。因此，您的指令超出了ng-repeat范围，并且无法显示任何内容。

无法将ng-repeat值传递给表中的自定义指令？

4 个答案: