無法用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來取代它。我在該指令的模板中使用one root element爲：

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

而不是顯示Angular控制檯痕跡很長的錯誤信息輸出。

但是，如果我從directive中刪除replace:true錯誤不再存在，但得到了意外的輸出。

這裏是Plunker

Answer 1

角不能使用非標元素，而不是一個tr。要解決您的問題，您可以使用屬性指令並將tr元素放置在您的ng-repeat中。

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

，並在你的指令：對這個錯誤here

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

Here is your updated Plunker. 更多信息。

Answer 2

這是一個AngularJS問題（#1459）。
有一個PR來解決它，但我不認爲它會合並（#3647）。

有2種方式解決它沒有分叉AngularJS：

1. 不要使用replace: true

2. 包裝你tr有div（導致無效HTML）

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