为什么向我的 AngularJS 模板添加 ng-repeat 会破坏它？答案

【问题标题】：Why does adding an ng-repeat to my AngularJS template break it?为什么向我的 AngularJS 模板添加 ng-repeat 会破坏它？
【发布时间】：2017-02-02 16:52:08
【问题描述】：

我有一个 AngularJS 指令，其模板文件如下所示：

path/to/myDirectiveA.template.html：

<tr>
    <td bgcolor='#7cfc00'>Statement</td>
    <td bgcolor='#ff1493'>{{MyDirectiveACtrl.a.b}}</td>
</tr>

它有效。输出如下所示：

然后我通过添加ng-repeat 来更改模板文件，如下所示：

<tr ng-repeat="currRow in [0, 1, 2, 3]">
    <td bgcolor='#7cfc00'>Statement</td>
    <td bgcolor='#ff1493'>{{MyDirectiveACtrl.a.b}}</td>
    <td bgcolor='#7cfc00'>{{currRow}}</td>
</tr>

这会导致它中断，如下图所示。短语Hello World! 不再出现！为什么？我该如何解决这个问题？？

我根本看不出添加 ng-repeat 会导致这种损坏的任何合乎逻辑的原因。这对我来说根本没有意义。

如果您需要，这里是调用它的控制器和指令，可以在我之前发布的this question 中找到。

【问题讨论】：

有没有CSS修改<tr>和<td>？
dmlittle：不涉及 CSS。
我认为这个问题可以让您了解您的问题stackoverflow.com/questions/16573954/…

标签： html angularjs angularjs-ng-repeat ng-repeat angular-template

【解决方案1】：

这可以解决问题吗（$parent）

<tr ng-repeat="currRow in [0, 1, 2, 3]">
    <td bgcolor='#7cfc00'>Statement</td>
    <td bgcolor='#ff1493'>{{$parent.a.b}}</td>
    <td bgcolor='#7cfc00'>{{currRow}}</td>
</tr>

【讨论】：

【解决方案2】：

<tbody>
<tr ng-repeat="currRow in [0, 1, 2, 3]">
<td bgcolor='#7cfc00'>Statement</td>
<td bgcolor='#7cfc00'>MyDirectiveACtrl.a.b</td>
<td bgcolor='#ff1493'>{{MyDirectiveACtrl.a.b}}</td>
<td bgcolor='#7cfc00'>{{currRow}}</td>
</tr>
</tbody>

更新您的 myDirectiveA.template.html 。希望对您有所帮助:)

【讨论】：

我不希望这个指令一直在 tbody 中。有时会在tfoot，有时会在thead，具体取决于标签的放置位置。
它在这两个地方都对我有用..你试过了吗？
不，我没试过。但是将<tbody> 嵌套在<thead> 中似乎不是一件好事。