在AngularJs中檢查互聯網連接並顯示PopUp

我嘗試在我的網站上實現，彈出窗口顯示與AngularJs的互聯網連接狀態。但是，直到我實現彈出，我試圖用我的代碼解決這個問題....在根文件在AngularJs中檢查互聯網連接並顯示PopUp

我的天堂：

angular.module("root", []) 
.controller("index", [function() {}], [function() {}]);

的alert.js文件有：

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
}); 

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

...在我的索引：

<head> 
     <meta charset="utf-8"> 
     <script>document.write('<base href="' + document.location + '" />');</script> 
     <link rel="stylesheet" href="style.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script> 
     <script src="app.js"></script> 
    </head> 
    <body ng-controller="MainCtrl"> 
     Hello {{name}}! {{online}} 
    </body>

感謝您的幫助！

來源

2016-07-05 Diaconu Eduard

如果你的網站是公共的，而不是從本地主機運行，你將連接到互聯網。如果您正在考慮另一項服務的可用性，可以查看https://docs.angularjs.org/api/ng/service/$http $ http.get並檢查狀態代碼 –

那麼，您遇到的問題是什麼？重新體驗這個代碼？預期的行爲是什麼？ – leroydev

感謝回覆@MaviDomates！該網站在localhost（apache）上。我是AngularJS的新手，我不知道我的問題到底在哪裏...... –

我在這裏實施了彈出窗口：Plunker Link 。嘗試離線查看警報。

我已經添加了引導模式：

<div id="myModal" class="modal fade" role="dialog"> 
     <div class="modal-dialog"> 
...

然後切換其顯示在你的JavaScript文件（使用jQuery）：

... 
$('#myModal').modal('show'); 
... 
$('#myModal').modal('hide'); 
...

var app = angular.module('myApp', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.name = 'World'; 
 
}); 
 

 
app.run(function($window, $rootScope) { 
 
    $rootScope.online = navigator.onLine; 
 
    $window.addEventListener("offline", function() { 
 
    $rootScope.$apply(function() { 
 
     $rootScope.online = false; 
 
     $('#myModal').modal('show'); 
 
    }); 
 
    }, false); 
 
    $window.addEventListener("online", function() { 
 
    $rootScope.$apply(function() { 
 
     $rootScope.online = true; 
 
     $('#myModal').modal('hide'); 
 
    }); 
 
    }, false); 
 
});

<html ng-app="myApp"> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div ng-controller="MainCtrl"> 
 
    <h2>Hello {{name}}!</h2> 
 
    Online Status : {{online}} 
 
    <!-- Modal --> 
 
    <div id="myModal" class="modal fade" role="dialog"> 
 
     <div class="modal-dialog"> 
 

 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Offline Alert!!</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
      <p>Hey {{name}}, you are offline.</p> 
 
      </div> 
 
      <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

來源

2016-07-05 10:41:56

Himanshu Tygai，真的非常感謝您的幫助！ –

navigator.onLine僅指示連接到網絡，並且必須連接到互聯網。 – Fergus

在AngularJs中檢查互聯網連接並顯示PopUp

回答

相關問題