表格中的“跳跃”表格中的angularjs ng-repeat？

Question

所以我基本上使用嵌套table创建ng-repeat。

<div ng-controller="PresetManageController">
  <table>
    <in-preset ng-repeat="preset in presetManage.presets"></in-preset>
  </table>
</div>

指令in-preset的模板是

<tr>
  <td>{{preset.name}}</td>
  <td>一些属性</td>
  <td>
    <a href="">编辑</a>
    <a href="">删除</a>
  </td>
</tr>

指令声明

module.directive('inPreset', function() {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'scripts/directive-templates/in-preset.html'
  }
});

但是当我打开页面时，我发现所有tr都跳到了桌面之外。

如果我将table更改为div，那么它可以正常工作。我已检查所有html标签是否完全关闭。调试这个问题真是太难了。有线索吗？

Answer 1

问题是因为您在自定义指令（设置为替换）上使用ng-repeat。 ng-repeat和replace指令（see related post）有一些奇怪的行为。

尝试将<tr>留在html中，然后将指令更改为属性。

HTML

<table>
  <tr in-preset ng-repeat="preset in presets"></tr>
</table>

JS

.directive('inPreset', function() {
  return {
    restrict: 'A',
    template: '<td>{{ preset.name }}</td>',
  };
})

请参阅Fiddler