【发布时间】：2012-09-17 17:17:33
【问题描述】：
我的视图中有一堆连接的 ul 列表，它们使用 jQuery UI：Sortable 指令来促进列表项的拖放和重新排序。
我通过 jQuery UI 的拖放进行的更改我使用 $apply 函数应用到 $scope，这部分工作......
然而，我现在遇到的问题是，在放入其中一些列表时，我提供了一个用户需要填写的自定义表单。
用户可以选择：
- 填写表格并继续，然后调用
$apply将数据持久化到$scope - 单击取消按钮，而不是调用
$apply来存储信息，应该恢复上一次拖放交互，有效地“重新呈现”我的所有列表以反映仍然在$scope中的数据阶段（因为最近的阻力还没有对其产生任何影响）。
这个“取消”按钮的效果是有效地将所有内容恢复到用户拿起列表项并将其拖入另一个列表之前的位置。
如何强制“刷新”或“重新渲染”我的 ng-repeats，以便它们在视觉上刷新并再次显示当前的 $scope 数据？
【问题讨论】：
-
通常，如果在 AngularJS 中完成，只需更改数据模型 ($scope) 即可。如果在外部完成，调用 $scope.$apply() 应该会触发更新/刷新。在取消操作结束时，您是调用 $scope.$apply()，还是将更改包装在 $scope.$apply(function() { ... changes here...}) 中？
-
我确实从基于 jQuery 的指令内部调用
$scope.apply()，但它似乎不会强制重新加载/重新渲染现有数据。可能是因为 Angular 认为一切都是一样的，不知道我做了 DOM 操作而不告诉它。所以我真正需要的只是一个“强制刷新”类型的调用，无论$scope状态如何，Angular 都会强制刷新其渲染数据。 -
好吧，作为一种可能的解决方法，如果您在对 $scope.$apply() 的调用中从 $scope 中删除拖动的项目——Angular 应该会看到并重新渲染——然后在下一个行（仍在您的 $scope.$apply() 调用中）使用 $timeout() 再次添加它：
$timeout( function(){ ...add removed item back to $scope here... });您在 $timeout 函数中执行的 $scope 操作应该会导致第二次渲染发生。 -
好主意，有点遗憾不得不重新渲染两次，但可能会奏效。稍后会试一试，谢谢您的评论。
标签： angularjs scope refresh rerender