Question

使用AngularJS，如果我的应用程序中丢失了互联网连接，如何显示警报消息状态？

我正在研究Angularjs Express框架和API。当我在应用程序上工作时，如果我失去了互联网连接，我需要弹出警报，我应该停止调用HTTP请求，直到我收到正确的互联网连接并恢复工作。

我甚至尝试使用offline.js无法解决，如果有任何简单易行的方法，请告诉我，谢谢。在标题中我添加了所有这些

<script src="/javascripts/plugins/offlinechecking/offline.min.js"></script>
<link rel="stylesheet" href="/stylesheets/themes/offline-theme-chrome.css" />
<link rel="stylesheet" href="/stylesheets/themes/offline-language-english.css" />
<script>
  Offline.options = {
    checkOnLoad: false,
    interceptRequests: true,
    reconnect: {
      initialDelay: 3,
      delay: (1.5 * last delay, capped at 1 hour)
    },
    requests: true,
    game: false
</script>

Answer 1

您可以使用在线和离线活动：

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);
});

更多信息：How to check internet connection in AngularJs

此外，您没有关闭Offline.options对象：

Offline.options = {
// No closing }.

Answer 2

您的选择：

在窗口，文档或document.body上添加addEventListener。
在文档或
上设置.ononline或.onoffline属性 document.body到JavaScript Function对象。
指定ononline =＆＃34; ...＆＃34;或onoffline =＆＃34; ...＆＃34;上的属性 HTML标记中的标记

我将展示最简单的。

在你的控制器中

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.connection变量。

评论1的更新

如果您需要变量为全局变量，请在工厂中设置

myApp.factory('connectionStatus', function(){
   var connection;

   return connection;
})

现在将此工厂注入您需要的地方。这是它在您设置事件的主控制器内部的方式。

myApp.controller('mainController', function($scope, connectionStatus) {
    document.body.onoffline = function() {
           alert('You are offline now');
           connectionStatus = 'offline' 
    }
})

如果我丢失了互联网连接，我想显示警报消息状态

2 个答案: