javascript - 无法用 tr 替换表内的指令

Question

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

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

我在自定义指令 ns-row 中使用 replace:true 将其替换为有效的 html table row - tr。我在指令的模板中使用了 一个根元素 作为:

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

Angular 没有显示输出，而是在控制台中跟踪了一条很长的错误消息。

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

这里是 Plunker

Answer 1

这是一个 AngularJS 问题 ( #1459 )。
有一个 PR 可以修复它，但我认为它不会被合并 ( #3647 )。

有两种方法可以在不 fork AngularJS 的情况下修复它:

1. 不要使用replace: true

2. 用 div 包装您的 tr(导致无效的 HTML)

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