2013-04-26 14 views
44

Questo è come vorrei controllare il collegamento internet in javascript vaniglia:Come controllare connessione internet in AngularJs

setInterval(function(){ 
    if(navigator.onLine){ 
     $("body").html("Connected."); 
    }else{ 
     $("body").html("Not connected."); 
    } 
},1000); 

devo controllori angolari e moduli nel mio progetto. Dove dovrei inserire il codice sopra? Dovrebbe essere eseguito nel contesto globale e non essere assegnato a un determinato controller. Ci sono forse qualche tipo di controller globale?

+0

Vedere anche http://stackoverflow.com/questions/15574580/how-can-i-detect-with-angularjs-if-the-app-is-offline – Mawg

risposta

133

Prima di tutto, ti consiglio di ascoltare online/offline events.

si può fare in questo modo in AnguarJS:

var app = module('yourApp', []); 

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

NOTA: sto avvolgendo la modifica della variabile di portata radici in $apply metodo per notificare angolare che qualcosa era cambiato.

Dopo di che è possibile:

In controlller:

$scope.$watch('online', function(newStatus) { ... }); 

nel markup HTML:

<div ng-show="online">You're online</div> 
<div ng-hide="online">You're offline</div> 

Ecco un Plunker di lavoro: http://plnkr.co/edit/Q3LkiI7Cj4RWBNRLEJUA?p=preview

Altro soluzione potrebbe essere quella trasmissione evento online/offline. Ma in questo caso è necessario inizializzare lo stato corrente al momento del caricamento e quindi iscriversi all'evento.

+0

Il tuo codice js ha un errore di battitura, ti manca un ')' per chiudere $ apply (. Ho appena provato e ottengo un errore: Uncaught TypeError: Impossibile chiamare il metodo 'addEventListener' di undefined –

+1

Grazie. Corro la mia risposta e aggiungo plunker. –

+3

Nota che questo non funziona in FireFox. Hanno scelto di implementare navigator.onLine in modo diverso da ogni altro browser, il che sta davvero facendo del male agli sviluppatori che vogliono sviluppare app offline. –

16

Non è sicuramente così bello, ma si potrebbe semplicemente provare una richiesta AJAX al server web; riuscirà o scadrà.

Inoltre, lo HubSpot/offline project sembra davvero buono.

+1

! + ma, Lol: è quello che sto cercando di sostituire. Ho avuto un servizio che è responsabile per il tentativo di riconnessione. Chiunque provi un '$ http.get' e ottenga 404 può richiamare il servizio che 1) trasmettesse che non c'era internet (in modo che nessun altro provasse a connettersi), 2) tentasse regolarmente di connettersi al mio server e, 3) in caso di successo, interrompere i tentativi di connessione e trasmettere che l'app è ora nuovamente online. Tuttavia, questo sembrava molto klunky e questa soluzione sembrava elegante - tranne FF :-(Non posso reinventare la ruota qui. Come fanno gli altri? – Mawg

+0

Oops, guarda il mio commento alla domanda correlata http://stackoverflow.com/questions/15574580/how-can-i-detect-with-angularjs-if-the-app-is-offline "Non l'ho fatto, ho appena aperto il loro simulatore piuttosto che usare la loro casella di controllo per fingere , In realtà ho tirato il mio cavo Ethernet In Chrome & MS IE, faccio l'avviso "sei offline" FF non lo ha mostrato Vedi anche stackoverflow.com/questions/16242389/... che indica che FF sembra essere non- standard" – Mawg

0

Le opzioni disponibili:

  • addEventListener sulla finestra, un documento o document.body.

  • impostazione delle proprietà .ononline o .onoffline sul documento o
    document.body su un oggetto funzione JavaScript.

  • specificando ononline = "..." o onoffline = "..." attributi sul tag nel il markup HTML

Mostrerò il più facile.

In te controller

document.body.onoffline = function() { 
    alert('You are offline now'); 
    $scope.connection = 'offline' 
} 

document.body.ononline = function() { 
    alert('You are online again'); 
    $scope.connection = 'online' 
} 

variabile scope.connection controllare $ prima di provare a inviare richieste in giro.

Problemi correlati