Question

我尝试在我的网站上实现，弹出以显示与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>

感谢您的帮助！

Answer 1

我在这里实现了弹出窗口：Plunker Link 。尝试离线查看警报。

我添加了Bootstrap模式：

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

然后在javascript文件中切换显示（使用jQuery）：

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

检查AngularJs中的互联网连接并显示PopUp

1 个答案: