javascript - 表格外的表格 "jump"中的angularjs ng-repeat？

Question

所以我基本上是用嵌套的 ng-repeat 创建一个 table。

<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 和替换指令 ( 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