AngularJS - 用户离线时使用服务更新视图答案

【问题标题】：AngularJS - Using service to update view when user goes offlineAngularJS - 用户离线时使用服务更新视图
【发布时间】：2017-11-30 04:44:22
【问题描述】：

我正在构建一个需要检测用户何时失去互联网连接或无法访问服务器的应用。多个控制器和服务需要能够检查和设置它。我已经使用 Angular 服务毫无问题地实现了所有这些，并且

window.addEventListener('offline', function() {OfflineService.checkIfOnline});

然后在服务中使用类似的东西

window.navigator.onLine ? online = true : online = false

当我需要在离线事件发生时更新视图时，棘手的部分就出现了。当服务属性被事件更新时，我似乎找不到更新范围属性或控制器属性的方法。

当我使用 $scope.$watch 时，函数会触发 10 次（由 console.log 记录），然后再也不会触发。

我试图在 jsfiddle 中复制问题，但这是我第一次使用该工具，我不确定我是否做对了：

https://jsfiddle.net/m3nx5yLm/1/

感谢您的帮助。

【问题讨论】：

https://www.npmjs.com/package/ng2-idle ?
手表会触发 10 次，因为那是 Angular 的摘要。对于任何与视图相关的更新，您无需进行任何监视：只需将值引用到范围（或控制器的“this”）即可。只要它绑定到控制器，视图就会在更改时自动更新...除非您使用:: 绑定值。无论如何，相关服务、控制器和 html 结构将不胜感激。
@briosheje 我也尝试将值绑定到控制器，但我不知道如何在服务属性更新时更新控制器属性。您是否看到了您所要求的相关信息的小提琴，还是我需要让小提琴更详细？
@SeanIvins 小提琴是空的。在任何情况下，您都应该将属性绑定到 service 本身，这样当角度控制器使用它时，它会自动更新。您可以遵循的最佳方法是将此类服务属性绑定到rootScope，以便每个范围都可以轻松继承它。不要为每个控制器初始化控制器变量：尝试从上面共享它，这样您就不必再担心问题了；）
@briosheje Oops 用我的更改更新了小提琴jsfiddle.net/m3nx5yLm/1 和jsfiddle.net/m3nx5yLm/2 显示我尝试使用 $rootScope 而不先查看文档（现在就这样做）。看到 jsfiddle 后的任何见解都值得赞赏。再次感谢

标签： javascript angularjs typescript

【解决方案1】：

感谢大家的帮助。

我最终选择了我的一个朋友建议的解决方案。在服务中使用 $rootScope.$emit('offlineEvent' true); 并在控制器中使用 $rootScope.$on('offlineEvent' this.setControllerProperty); 监听它。

【讨论】：

为了避免内存泄漏，AngularJS 事件监听器应该附加到使用它们的 $scope 上。如果附加到 $rootScope，它们需要在不再需要时被销毁。有关详细信息，请参阅AngularJS $rootScope/$scope API Reference - $destroy event。
另外最好使用$rootScope.$broadcast。有关详细信息，请参阅AngularJS Developer Guide - Scope Event Propagation。
想知道您是否尝试过我的回答，或者为什么您认为它比广播事件更糟糕？个人认为 Angular 中的事件应该只用于系统范围的事情，例如路由更改成功或事件可能被用作解耦多个父/子指令同时仍为它们提供通信方式的事情。

【解决方案2】：

https://jsfiddle.net/m3nx5yLm/3/

constructor($scope, OfflineNotificationService){

看起来您是从范围引用类而不是注入器创建的实例（需要将其与 $scope 一起传递）。我还使用了 watch 语法，其中第一个 arg 是一个函数，只是为了清楚地进行调用，字符串语法通常仅用于引用作用域上的属性。其他一些注意事项，您可以只返回 window.navigator.onLine 并且可以将值存储在服务实例上并直接从视图中引用它，然后您可以使用 $timeout 循环定期调用 checkOnline 或监听在线/离线浏览器上的事件，而不是使用手表来触发函数。

https://jsfiddle.net/m3nx5yLm/4/

【讨论】：

我很抱歉忘记了这个问题。你的答案是一个更好的解决方案。即使我自己没有使用它，您的 jsfiddle 也清楚地表明它有效，并且正如我的回答中的 cmets 所述，我的实现可能会导致内存泄漏。再次感谢您的帮助