2016-03-29 2 views
2

Каким образом я могу сделать глобального слушателя (или любой другой), проверяя, если есть подключение к Интернету, видимую всего приложения независимо от того, что контроллер я в и внутри него с помощью функции показывает простой угловой материал Оповещение в каждом приложении.Global слушателем для состояния сети

Так что, если мне нужно вызвать это на любом контроллере, я думаю, есть другой способ сделать это, но я не знаю, как это сделать.

прослушиватель Я написал, используя метод addEventListener.

ответ

2

Вы можете подписаться на это событие в 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) Первый если check предназначен для начальной начальной фазы запуска приложения; потому что это может быть, что вы

  • использованием обслуживания рабочих и может приложение пользовательского интерфейса, даже при нахождении в автономном режиме;
  • пользователь сохранен ярлык на мобильном телефоне с «Добавить в главный экран»
+0

Могу ли я добавить в эту функцию, создавая оповещение, если мы в автономном режиме или в другом месте? Итак, этот прогон будет виден во всем приложении (я вижу, что вы используете $ rootScope), не используя какой-то контроллер сортировки? – adm

+0

да да, проверьте обновленный код – shershen

+0

, пожалуйста, проверьте мой вопрос с вопросом – adm

0

Вы могли бы использовать что-то вроде 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