Javascript 网络状态的全局侦听器

通过这种方式，我可以使用在每个应用程序视图中显示简单角度材质警报的功能，在整个应用程序中检查是否有可见的互联网连接

所以，如果我需要在任何控制器中调用它，我想还有另一种方法可以做到这一点，但我不知道怎么做

---

我使用addEventListener方式编写的侦听器。

您可以在

运行部分订阅该事件

.run(['$rootScope', '$window', function($rootScope, $window) {
  $rootScope.online = $window.navigator.onLine;
  if (!$rootScope.online) {
    //do actions here
    //for example go to special state, $state.go('offline')
    alert('Offline!');
  }

  $window.addEventListener("offline", function() {
    //do actions here
    //for example set $rootScope.online = false;
    alert('Offline!');
  }, false);

  $window.addEventListener("online", function() {
    //do actions here, 
    //for example set $rootScope.online = true;
    alert('Online!');
  }, false);
}])

1） 由于它位于
run
块中，因此它位于层次结构的顶部；应用程序启动时执行；我在几个项目中使用这种方法，并且它在所有控制器中都有效

2） 第一次如果检查是针对首次应用程序初始启动阶段；因为那可能就是你


使用服务人员，即使离线也可以使用应用程序界面
用户使用“添加到主屏幕”在手机上保存了快捷方式
您可以使用

还是自己滚

angular.module('plunker', [])

.factory('OnlineStatus', function($timeout) {
  var isOnlineNow = true,
    isOnline = function() {
      $timeout(function() {
        isOnlineNow = true;
      });
    },
    isOffline = function() {
      $timeout(function() {
        isOnlineNow = false;
      });
    };

  if (window.addEventListener) {
    /*
     Works well in Firefox and Opera with the 
     Work Offline option in the File menu.
     Pulling the ethernet cable doesn't seem to trigger it.
     Later Google Chrome and Safari seem to trigger it well
     */
    window.addEventListener("online", isOnline, false);
    window.addEventListener("offline", isOffline, false);
  }
  else {
    /*
     Works in IE with the Work Offline option in the 
     File menu and pulling the ethernet cable
     */
    document.body.ononline = isOnline;
    document.body.onoffline = isOffline;
  }

  return {
    isOnline:function() {
      return isOnlineNow;
    }
  };
})
.directive('online', ['OnlineStatus', function(OnlineStatus) {
  return {
    template:'<div class="online"></div>',
    replace:true,
    restrict:'E',
    link:function(scope, elem, attrs) {
      scope.$watch(function() {
        return OnlineStatus.isOnline();
      }, function(isOnline) {
        elem.html(isOnline ? 'Online' : "Offline");
      })
    }
  };
}])

angular.module（'plunker'，[]）
.factory（'OnlineStatus'，函数（$timeout）{
var IsonLineLow=真，
isOnline=函数（）{
$timeout（函数（）{
IsonLineLow=真；
});
},
Isofline=函数（）{
$timeout（函数（）{
IsonLineLow=假；
});
};
if（window.addEventListener）{
/*
在Firefox和Opera中使用
“文件”菜单中的“脱机工作”选项。
拉动以太网电缆似乎不会触发它。
后来谷歌Chrome和Safari似乎很好地触发了它
*/
window.addEventListener（“在线”，isOnline，false）；
window.addEventListener（“脱机”，Isofline，false）；
}
否则{
/*
使用中的脱机工作选项在IE中工作
文件菜单并拔出以太网电缆
*/
document.body.ononline=isOnline；
document.body.onoffline=异弗林；
}
返回{
isOnline:function（）{
返回IsonlineLow；
}
};
})
.directive（'online'，['OnlineStatus'，函数（OnlineStatus）{
返回{
模板：“”，
替换：正确，
限制：'E'，
链接：功能（范围、要素、属性）{
范围$watch（函数（）{
返回OnlineStatus.isOnline（）；
}，函数（isOnline）{
html（isOnline？“在线”：“离线”）；
})
}
};
}])

请参见
如果我们处于脱机状态或在其他位置，我是否可以将此功能添加到创建警报中？所以这个运行将在整个应用程序中可见（我看到您使用$rootScope），而不必使用某种排序控制器？建议代码的哪一部分不清楚？如果您使用此选项，在切换在线/离线状态时，您是否能正确获得简单的浏览器警报？代码99%清晰，我也以类似的方式执行了此操作，但我担心我是否只能执行此操作，并且在我的应用程序中的任何位置都可以看到我的警报？对于第一个if语句，我只有一个问题，如果我们在下面添加了EventListener，为什么要使用这个呢。这是为了全球行动？总之，我想没有必要使用interval方法来调用此函数，因为我们有动态检查？如何在另一个控制器（模块）中检查我的联机状态，例如使用onsubmit表单函数？我补充说我的.run块是全局的，这意味着它不在任何模块中。我不想在我的控制器中添加addEventListener，我想在我的全局中使用listener。运行block.pls仔细阅读我示例中的代码-您可以设置“$rootScope.online”属性值，然后在其中访问任何控制器或指令；