javascript - 如何让 AngularJS 更新 ng-repeat 数组拼接上的 DOM？ $scope.$apply() 返回一个错误

Question

已解决 - 我有这个 plunkr这表明了我面临的问题。这是一个简单的图片 uploader ，也使用 FileReader显示图像(感谢 angular-file-uploads )。我把它放在一个可以添加和删除的动态形式中。

问题:

1. 在此plunkr , dataUrl直到 Add
Another Image 之后才显示被点击。这可能是一个 plunkr 唯一的问题，因为该图像在我的网站上显示得很好。 --已解决

2. 如果您将图像上传到第一个表单，则单击 Add Another Image ，然后点击第一个标签，然后删除第一个标签，$scope.images中的数据被删除但 DOM 没有更新。添加 $scope.$apply()导致 digest already in progress 错误。

3. 旧文件名显示在上传输入中，但输入实际上是空的。

我的问题是:删除图像后如何更新 DOM？

更新:问题 #1 已解决，但问题 #2 和 #3 仍然存在。

更新 2: 我试过附加 $scope.$apply对于 <input type="file" onchange="..."但用 splice() 删除图像不会触发 onchange事件。

更新 3: 我添加了一个带有 ng-model="image.caption" 的简单文本输入查看 DOM 是否会适当更新。确实如此。如果 images[0]，DOM 也会正确更新被 images[1] 删除已经有图像了。

Update4: Grundy 已确定问题:track by $index .删除它会使一切按预期工作。虽然不确定为什么。

Answer 1

你的ngRepeat
中的track by表达式有问题正如文档中所说 ngRepeat

ngRepeat makes the corresponding changes to the DOM:

• When an item is added, a new instance of the template is added to the DOM.
• When an item is removed, its template instance is removed from the DOM.
• When items are reordered, their respective templates are reordered in the DOM.

因此，在您拼接第一个元素的情况下，最后一个元素的 index 更改为 first 并且 angular 认为只需要从 DOM 中删除最后一个元素，而不需要先改变。

此外，$index、$last 等是 ngRepeat 范围内的特殊属性，因此它始终可用且不依赖于 < em>通过表达式跟踪