Question

无论我在哪个控制器内部，我都可以通过哪种方式检查全局监听器（或其他）是否在整个应用中显示互联网连接它使用函数在每个应用程序视图中显示简单的角度材质警报。

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

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

Answer 1

您可以在run部分

订阅该活动

.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）第一次 if 检查是第一次初始应用启动阶段;因为那可能是你

使用服务工作者，即使离线也可以使用应用UI;
用户使用＆＃34;添加到主屏幕＆＃34;

Answer 2

您可以使用Offline

之类的内容

或推出自己的

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

请参阅http://plnkr.co/edit/DrW8UdYsediusRMu1aMo?p=preview

全球网络状态监听器

2 个答案: