当 ng-repeat 中的 ng-init 重播时？

Question

我有一个简单的ng-repeat 从一个 javascript 数组构建一个 HTML 列表。 可以使用输入移动每个项目以获得新排名。此输入绑定到变量rank。该变量使用ng-init 指令初始化。

代码如下所示：

<li ng-repeat="item in ctrl.getItems()">
  <div ng-init="rank = $index">
    [$index: {{$index}}]
    {{item}}<br/>
    <label>
      Move to
      <input type="number" ng-model="rank"/>
    </label>
    <button type="button" ng-click="ctrl.moveItem($index, rank)">
      Ok
    </button>
  </div>
</li>

在运行时，当我更改输入值并单击 Ok 按钮时，会调用函数 ctrl.moveItem 并且项目会真正移动到 ctrl.getItems() 数组中。

所以ng-repeat 被重播，项目以新顺序出现。

但是变量 rank 未重新初始化，出现 2 个具有相同排名的项目。

样本在这里：https://jsfiddle.net/nlips/4ng34b7b/

我的问题不在于移动列表中的项目，而是我需要了解 ng-init 在 ng-repeat 上下文中的工作原理。

我在 AngularJS 官方文档中没有找到关于这个主题的任何内容。

Answer 1

来自 AngularJS 文档：

ngInit 指令允许您在当前范围内计算表达式。

现在。您正在使用不同的范围。

您正在将 ngInit 用于 transcluded 范围，每次重复模板的该部分时都会覆盖 $scope.rank。

如果你想保持你的排名，你应该将它初始化到 ngRepeat 范围。

尝试：

<li ng-repeat="item in ctrl.getItems()" ng-init="rank = $index">
  [$index: {{$index}}]
  {{item}}<br/>
  <label>
    Move to
    <input type="number" ng-model="rank"/>
  </label>
  <button type="button" ng-click="ctrl.moveItem($index, rank)">
    Ok
  </button>
</li>

编辑答案

好的，我明白了。 ngInit 表达式仅在模板的该部分将被渲染到 DOM 时进行评估。

因此，当页面第一次加载时，您的表达式会被触发并且每个 rank 都会被正确评估。

但是，当您对已渲染的项目进行更改时，您的模板不会再次渲染，因此您的 ng-init 不会被触发。

如果您希望 ng-init 再次执行，您必须从 DOM 中删除该项目，然后将其附加回新位置。

这种方法有几种替代方法，但我希望这能澄清发生了什么。