Question

here is demo: 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

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

Answer 1

<th>代码中确实需要<td>或<tr>：

<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>

Answer 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>

AngularJS dynamic ng-repeat directive, the html not redering

2 个答案: