我尝试在我的网站上实现一个弹出窗口来显示 AngularJs 的互联网连接状态。但是，在我实现弹出窗口之前，我尝试用我的代码解决问题......
我在根文件中:
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>
感谢您的帮助!
最佳答案
我在这里实现了弹出窗口:Plunker Link 。尝试离线查看警报。
我添加了 Bootstrap 模式:
<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">×</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>关于javascript - 检查 AngularJs 中的互联网连接并显示 PopUp，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38200910/