由于事件导致模型更改后AngularJS不刷新视图

Posted 2023-02-26

【中文标题】由于事件导致模型更改后AngularJS不刷新视图

【英文标题】：AngularJS not refreshing view after model changed as result of an event

【发布时间】：2013-05-29 15:38:18

【问题描述】：

我已经为 a Plunker 准备了一个简化的应用场景，我正在编码的应用正在发生这种情况。

对场景的一点解释：

有一个控制器将交易列表（Transaction 类型的对象）加载到 $scope 中 此控制器侦听由负责持久化新的或更新的 Transaction 对象的服务产生的事件，然后重新加载模型 视图使用 ng-repeat 呈现事务列表 每个事务都可以单独更新（提交或回滚） AngularJS 应用程序有一个 run() 块，它每 2 秒创建一个新的 Transaction 对象，模拟这些事务来自外部源（例如，针对服务器的 $http 请求）

您将看到的是，在接收到服务生成的事件后，使用新的对象列表重新分配模型时，不会重新加载视图。

在过去的 48 小时里，我一直在用这个把头发拉下来。这种行为最常见的原因是在 AngularJS 之外修改模型而不是调用 $apply()，但是（我认为）情况并非如此。

还尝试检查 $scope.$$phase 和手动调用 $apply 或 $digest（即使这可能被认为可能很糟糕），但完全没有成功。

我做错了吗？这是一个错误吗？还有其他我可以应用的策略吗？

【问题讨论】：

点击“手动刷新”按钮会发生什么？

我想您已经通过下面的答案弄清楚了...无论如何，此按钮会强制重新加载模型（因为当事件发生时它无法这样做）

【参考方案1】：

setInterval 也是“在 Angular 之外”，我不确定您是否尝试在那里使用 $apply。如果将transactions.persist(t); 包装在$rootScope.$apply() 内的app.js 中，您将看到列表每两秒刷新一次。 “COMMIT”和“ROLL BACK”按钮产生的变化也会立即显示出来。

Working plnkr

【讨论】：

感谢您的回答。确实 setInterval 会在 AngularJS 之外。在设计剧本时没有考虑到这一点。在我的真实应用中，没有 setIntervals，我会尝试修改它以删除它们并以其他方式模拟新对象。

事实证明你是对的，你给了我我需要的线索。我运行了一些其他不相关的时间间隔，即使它们与遇到此问题的进程没有任何关系，只要我修复了将其包装在 $rootScope.$apply() 中的代码 :)