网络状态的全局监听器

Question

我可以用哪种方式做一个 global 侦听器（或其他）检查我们是否在 whole app 中可见互联网连接我在哪个控制器中以及在其中使用在每个应用程序视图中显示简单 angular material 警报的功能。

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

listener我用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检查是针对首次初始应用程序启动阶段；因为那可能是你

使用 service worker 并且即使离线也可以应用 UI；
用户使用 "Add to homescreen"

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

网络状态的全局监听器

Global listener for network status

javascript

angularjs

angular-material