AngularJS - 使用服务在用户下线时更新视图

时间:2017-11-29 17:30:55

标签: javascript angularjs typescript

我正在构建一个需要检测用户何时失去互联网连接或无法访问服务器的应用。多个控制器和服务需要能够检查和设置它。我已经使用角度服务和

完成了所有这些工作
window.addEventListener('offline', function() {OfflineService.checkIfOnline});

然后在服务中使用

之类的东西
window.navigator.onLine ? online = true : online = false

当我需要在发生脱机事件时更新视图时,会出现棘手的部分。当事件更新服务属性时,我似乎无法找到更新范围属性或控制器属性的方法。

当我使用$ scope。$ watch时,该函数会触发10次(由console.log指出)然后再不会。

我试图在jsfiddle中复制问题,但这是我第一次使用该工具,而且我不确定我是否做得对:

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

感谢您的帮助。

2 个答案:

答案 0 :(得分:1)

谢谢大家的帮助。

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

答案 1 :(得分:0)

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

constructor($scope, OfflineNotificationService){

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

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