如何检查在AngularJs的互联网连接

这是我将如何检查互联网连接在香草javascript：

setInterval(function(){ if(navigator.onLine){ $("body").html("Connected."); }else{ $("body").html("Not connected."); } },1000); 

我的项目中有angular度控制器和模块。 我应该在哪里把代码放在上面？ 它应该在全局环境中执行，而不是分配给某个控制器。 是否有某种全球控制器可能？

Answer 1

首先，我build议你聆听在线/离线活动 。

你可以这样做在AnguarJS：

 var app = module('yourApp', []); app.run(function($window, $rootScope) { $rootScope.online = navigator.onLine; $window.addEventListener("offline", function() { $rootScope.$apply(function() { $rootScope.online = false; }); }, false); $window.addEventListener("online", function() { $rootScope.$apply(function() { $rootScope.online = true; }); }, false); }); 

注意：我正在包装更改根作用域的variables在$apply方法通知Angular有什么改变。

之后，您可以：

在控制器中：

 $scope.$watch('online', function(newStatus) { ... }); 

在HTML标记中：

  <div ng-show="online">You're online</div> <div ng-hide="online">You're offline</div> 

这里是一个工作Plunker： http ://plnkr.co/edit/Q3LkiI7Cj4RWBNRLEJUA?p=preview

其他解决scheme可能是广播在线/离线事件。 但在这种情况下，您需要在加载时初始化当前状态，然后订阅事件。

Answer 2

这绝对不是很好，但你可以尝试一个AJAX请求到您的Web服务器; 它会成功或超时。

此外， HubSpot /脱机项目看起来非常好。

Answer 3

您的select：

• 窗口，文档或document.body上的addEventListener。

• 在文档上设置.ononline或.onoffline属性
  document.body到一个JavaScript函数对象。

• 在HTML标记的标记中指定ononline =“…”或onoffline =“…”属性

我将展示最简单的。

在你的控制器

 document.body.onoffline = function() { alert('You are offline now'); $scope.connection = 'offline' } document.body.ononline = function() { alert('You are online again'); $scope.connection = 'online' } 

在尝试发送请求之前，请检查$ scope.connectionvariables。