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'
  }
});

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

如果我将更改为

，那么它就正常工作了。 我已经检查过所有HTML标签都完美关闭了。 这个问题很难调试。 有什么线索吗？

- John Wu

Answer 1

问题出在你正在使用 ng-repeat 在一个自定义指令（设置为替换）上。ng-repeat 和替换指令有一些奇怪的行为（请参考相关帖子）。

尝试在你的 HTML 中保留 <tr>，并将你的指令更改为属性指令。

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

js

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

请查看Fiddler。

- Dan

---

由于指令模板必须有一个根元素，因此在这种情况下，您只能在模板中放置一个 td。这不是我想要的。 - John Wu

这个加上this answer中的建议帮助我解决了OP遇到的同样问题。 - Nate Barbettini