正在检查Cordova和AngularJS中的网络连接状态

Checking network connection status in Cordova and AngularJS

本文关键字：网络 连接 状态 AngularJS 检查 Cordova      更新时间：2023-09-26

这是一个基本问题，因为我是Cordova和AngularJS的初学者
我有一个带有Cordova和AngulaJS的应用程序，我想用cordova插件的网络信息来检查网络连接。

以下代码运行良好：

var app = angular.module('CordovaPluginTest', []);
app.run(['$rootScope', function ($rootScope) {
    document.addEventListener('deviceready', function () {
        document.addEventListener('online', toggleCon, false);
        document.addEventListener('offline', toggleCon, false);
        if (navigator.connection.type == Connection.NONE)
            $rootScope.$apply(function () { $rootScope.isOnline = false; });
        else
            $rootScope.$apply(function () { $rootScope.isOnline = true; });
    }, false);
    function toggleCon(e) {
        if (e.type == 'online')
            $rootScope.$apply(function () { $rootScope.isOnline = true; });
        else if (e.type == 'offline')
            $rootScope.$apply(function () { $rootScope.isOnline = false; });
    }
}])

但下面的一个不起作用：

var app = angular.module('CordovaPluginTest', []);
app.run(['$rootScope', function ($rootScope) {
    $rootScope.$on('deviceready', function () {
        $rootScope.$on('online', function () { $rootScope.isOnline = true; });
        $rootScope.$on('offline', function () { $rootScope.isOnline = false; });
        if (navigator.connection.type == Connection.NONE)
                $rootScope.isOnline = false;
        else
                $rootScope.isOnline = true;
    });
    $rootScope.$watch('isOnline', function (val) { alert('watch isOnline:'+val);})
}])

为什么定义angular event listener不起作用？事实上，它根本没有得到活动！在角度上做这件事的正确方法是什么？

对于document DOM元素，Angular使用包装器（$document），并依赖jQuery/jqLite绑定相关事件。

因此，您可以使用$document.on("event-type",function( event ){ ... });或angular.element(document).bind("event-type",function( event ){ ... });将处理程序附加到document。

但是你肯定不能使用$rootScope$on以侦听附加到文档元素的事件。

试试这个：

 app.run(function($window, $rootScope) {
  $rootScope.online = navigator.onLine;
  $window.addEventListener("offline", function () {
    $rootScope.$apply(function() {
      $rootScope.online = false;
//        $window.location.reload();
    });
  }, false);
  $window.addEventListener("online", function () {
    $rootScope.$apply(function() {
      $rootScope.online = true;
 //       $window.location.reload();
    });
  }, false);
});

并在cordova 中添加网络信息插件

相关文章：