Angular - 从服务到控制器的异步更新和渲染答案

【问题标题】：Angular - async updates & rendering from service to controllerAngular - 从服务到控制器的异步更新和渲染
【发布时间】：2016-12-27 01:09:57
【问题描述】：

我有一个Service 监听 webSockets（不能使用回调或承诺，数据更新是随机的）。服务获取更新并将它们保存到服务的对象。我有一个带有控制器的 angular-app 页面，该页面在 $scope 中有服务对象。

但是我在页面上呈现数据时遇到了问题。现在我正在使用 $timeout() 来更新视图，但正在寻找一种更优雅的方式。

我知道我可以在服务对象上使用$watch，但我认为它对浏览器来说太重了。

那么在服务数据发生变化后渲染视图/控制器的正确方法是什么？

【问题讨论】：

你也可以使用 $scope.$apply() 但最终只调用 watch ..
信息不足。可以使用$scope.$digest() 来优化事物。它会触发当前范围和嵌套范围的摘要，而任何其他方式都会触发根范围的摘要。
听起来很有趣！但是为了调用 $digest 我需要 $scope ...？无论如何，这是我的问题的一些简单示例：plnkr.co/edit/53m5cOe8XDDDRrxFX0NK?p=preview 尝试使用“setTimeout()”模拟 comming webSockets 数据。我无法使用承诺，因为数据已推送。在 service.js 中，您已注释 $timeout - 如果您取消注释，它将开始工作。

【解决方案1】：

我建议你使用 resolve ，它会在控制器和视图在你的路由文件中实例化之前加载数据，并将你的服务注入到函数中

您可以观看此演示PLunker Demo

【讨论】：

【解决方案2】：

你可以使用$rootScope.$broadcast作为替代但是它也和$watch一样重，我不知道你为什么害怕使用$watch，性能成本并没有那么大！！

要使用$broadcast，请将这行代码添加到您的服务中：

$rootScope.$broadcast('WatchedData', data);

并在您的控制器中执行以下操作：

$scope.$on('WatchedData', function(event) {  return stuff  });

要了解更多关于$rootscope.$broadcast的信息，请查看this所以回答

【讨论】：