Question

这是一个基本问题，因为我是Cordova和AngularJS的初学者我有Cordova和AngulaJS的应用程序，我希望以有角度的方式使用cordova-plugin-network-information检查网络连接。

以下代码可以正常使用：

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不起作用？事实上，它根本没有举办活动！在角度中这样做的正确方法是什么？

Answer 1

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

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

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

Answer 2

试试这个：

 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中添加网络信息插件

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

2 个答案: