AngularJS动态ng-repeat指令，html不渲染答案

【问题标题】：AngularJS dynamic ng-repeat directive, the html not rederingAngularJS动态ng-repeat指令，html不渲染
【发布时间】：2017-01-04 01:52:15
【问题描述】：

这里是演示：http://codepen.io/mafeifan/pen/PzrGRE?editors=1010

table1 正在工作，
在 table2 我写了一个指令来渲染 td ，但不起作用。我不知道为什么。

HTML：

  <table>
    <tbody>
      <tr ng-repeat="tr in vm.getTrs() track by $index">
        <form-cell ng-repeat="cell in vm.getCellsByRow($index+1)">data</form-cell>
      </tr>
    </tbody>
  </table>

JS：

App.directive('formCell', function(){
  return {
    replace: true,
    template: '<td>td</td>'
  }

});

如果我改成

  <table>
    <tbody>
      <tr ng-repeat="tr in vm.getTrs() track by $index">
        <td ng-repeat="cell in vm.getCellsByRow($index+1)"><form-cell></form-cell></td>
      </tr>
    </tbody>
  </table>

JS：

change the template to '<span>td</td>' in directive

它工作正常，我不知道为什么

【问题讨论】：

form-cell 不是有效的 html 标记。你也需要td 或th 在tr
你可以看看这个帖子：AngularJS ng-repeat with custom element inside a table is rendering strangely.

标签： javascript angularjs angularjs-directive

【解决方案1】：

<tr> 标签中确实需要<th> 或<td>：

<html>
   <body>
      <table border="1">
         <tr>
            <td>renders</td>
            <td>renders</td>
         </tr>
         <tr>
            <div>renders outside the table</div>
            <td>renders</td>
         </tr>
      </table>
   </body>
</html>

【讨论】：

【解决方案2】：

似乎form-cell 标签内不允许使用tr 标签，浏览器可能会出错。在属性中使用指令：

App.directive('formCell', function(){
  return {
    restrict: 'A', // <-- add the restriction
    replace: true,
    template: '<td>td</td>'
  }
});

喜欢：

<td form-cell ng-repeat="cell in vm.getCellsByRow($index+1)">data</td>

【讨论】：