如何检查互联网连接在AngularJs

发布时间：2020-12-17 08:57:16 所属栏目：安全来源：网络整理

导读：这是我如何检查互联网连接在vanilla javascript： setInterval(function(){ if(navigator.onLine){ $("body").html("Connected."); }else{ $("body").html("Not connected."); }},1000); 我在我的项目中有角度控制器和模块。我应该把代码放在哪里？它应该在

这是我如何检查互联网连接在vanilla javascript：

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

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

首先，我建议你听 online/offline events。

你可以这样在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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!