一尘不染

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

angularjs

这就是我在香草javascript中检查互联网连接的方式:

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

我的项目中有角度控制器和模块。我应该在上面的代码放在哪里?它应在全局上下文中执行,而不应分配给某个控制器。也许有某种全局控制器?


阅读 198

收藏
2020-07-04

共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>

这是工作正常的柱塞:http
://plnkr.co/edit/Q3LkiI7Cj4RWBNRLEJUA?p=preview

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

2020-07-04