不能用tr替换表中的指令

Question

我正在尝试在Angular JS中动态填充/创建表格。我创建了一个指令ns-row来表示我的表中的行。我使用ng-repeat指令遍历我的自定义指令ns-row中的所有数据，如下所示：

<tbody>
 <ns-row ng-repeat="row in data" row="row"></ns-row>
</tbody>

我在自定义指令replace:true中使用ns-row将其替换为有效html table row - tr。我在指令模板中使用了one root element：

<tr><td> {{row.id}} </td> <td> {{row.name}} </td> </tr>

而不是在控制台中显示输出Angular跟踪长错误消息。

但是，如果我从replace:true中移除了directive，则错误不再存在，但会得到意外的输出。

这是Plunker

Answer 1

这是一个AngularJS问题（#1459） 有一个公关来解决它，但我认为它不会被合并（#3647）。

有两种方法可以修复它而不需要使用AngularJS：

1. 请勿使用replace: true

2. 使用tr包裹您的div（导致HTML无效）

   <div>
     <tr><td> {{row.id}} </td><td> {{row.name}} </td></tr>
   </div>
   

Answer 2

Angular无法使用非标准元素而不是tr。要解决您的问题，您可以使用属性指令并在tr中放置ng-repeat元素。

<tbody>
    <tr ng-repeat="row in data" ns-row="row"></tr>
</tbody>

并在你的指令中：

return {
    restrict : "A",
    scope: {
        row : '=nsRow'
    },
    template : "<td>{{row.id}}</td><td>{{row.name}}</td>"
}

Here is your updated Plunker. 有关此错误的更多信息here。