Ionic：使用Cordova检查Internet连接

Question

我正在研究Ionic Framework，并在使用Apache Cordova Network
API
来检测AndroidApp中的互联网连接时遇到问题。我参考了本教程，并创建了一个演示项目，该项目运行良好。

我已按照以下步骤操作。[来自教程]

1. ionic start testApp sidemenu

2. ionic platform add android

3. 打开 testApp/www/js/app.js

4. 复制粘贴此代码

        if(window.Connection) {

      if(navigator.connection.type == Connection.NONE) {
          alert('There is no internet connection available');
      }else{
          alert(navigator.connection.type);
      }
    }else{
          alert('Cannot find Window.Connection');
    }

1. 安装Cordova插件 cordova plugin add org.apache.cordova.network-information

2. 建立 ionic build android

3. 跑 ionic run android

这很好

问题

1. www从复制粘贴mainproject到testApp并执行步骤6和7

我收到警报 Cannot find Window.Connection

之后 复制粘贴app.js这个样子的

    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
          // org.apache.cordova.statusbar required
          StatusBar.styleDefault();
        }
        // check internet connection
        //alert(window.Connection);
        alert('Hi')
        try {
           alert('Naviagtor says'+navigator.connection.type);
         }
        catch(err) {
           alert( 'Error '+ err.message) 
           //here i get 'Error cannot read property type of undefined'
         }

    if(window.Connection) {
        if(navigator.connection.type == Connection.NONE) {
            alert('There is no internet connection available');
        }else{
            alert(navigator.connection.type);
        }
    }else{
        alert('Cannot find Window.Connection');
    }

      });
    })

当我将我的粘贴app.js并粘贴controllers.js到testApp/www/js目录的那一刻，整个事情都崩溃了。

非常感谢调试方面的任何帮助。

谢谢，

注意

我有cordova.js在index.html。

我已经重新安装platforms，plugins复制后也是如此。

Answer 1

我通过使用ngcordova解决了类似的问题。它为实现promise的插件提供了一个有角度的包装器。

当您尝试调用Cordova插件时，它们通常还没有准备好，使用promise接口可以避免出现未定义的错误。

我从此处的网络插件的ngcordova页中窃取了该示例。

    module.controller('MyCtrl', function($scope, $rootScope, $cordovaNetwork) {

     document.addEventListener("deviceready", function () {

        var type = $cordovaNetwork.getNetwork()

        var isOnline = $cordovaNetwork.isOnline()

        var isOffline = $cordovaNetwork.isOffline()


        // listen for Online event
        $rootScope.$on('networkOffline', function(event, networkState){
          var onlineState = networkState;
        })

        // listen for Offline event
        $rootScope.$on('networkOffline', function(event, networkState){
          var offlineState = networkState;
        })

      }, false);
    });