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

Question

这就是我在vanilla javascript中检查互联网连接的方法:

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

我的项目中有角度控制器和模块.我应该把代码放在哪里？它应该在全局上下文中执行,而不是分配给某个控制器.是否有某种全球控制器？

Answer 1

首先,我建议你听在线/离线活动.

你可以在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);
});

注意:我在$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

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

Answer 2

它绝对不是那么好,但您可以尝试向您的Web服务器发出AJAX请求; 它会成功还是超时.

此外,HubSpot /离线项目看起来非常好.