Ionic之监测网络连接

今天发现目前的app项目还没有对网络连接做处理，于是研究了一下。趁现在搞定赶紧记录下来
在ionic中，我们需要用到codovaNetwork,这个插件输入如下命令引入：

cordova plugin add cordova-plugin-network-information

接下来放入我刚写的代码：

document.addEventListener('deviceready',function(){
            $rootScope.isOnline = $cordovaNetwork.isOnline();
            // 监听手机网络在线事件
            $rootScope.$on('$cordovaNetwork:online', function(event, networkState){
                $rootScope.isOnline = true;
            })
            // 监听手机网络离线事件
            $rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
                $rootScope.isOnline = false;
            })
            //监听isOnline的变化,如果是离线，则点击button出现离线提示
            $scope.$watch('isOnline',function(newValue,oldValue,scope){
                console.log($rootScope.isOnline);
                $scope.email = function(){
                    if($rootScope.isOnline){
                        $state.go("register.re-email");
                    }else{
                        $scope.warnShow = "warnShow";
                        $timeout(function(){
                            $scope.warnShow = "";
                        },3000)
                    }
                }

                //点击出现facebook登录模态框
                $scope.showFbModal = false;
                $scope.openFbModal = function(){
                    //如果手机是在线，则button可任意点击
                    if($rootScope.isOnline){
                        $scope.showFbModal = true;
                        $scope.slideUp = "slideUp";
                    }else{
                        $scope.warnShow = "warnShow";
                        $timeout(function(){
                            $scope.warnShow = "";
                        },3000)
                    }
                }
            })

注意在控制器中引入 rootScope, scope,$cordovaNetwork这几个对象，
如下是我的当前页面：

当我的手机没有网络时，点击图中两个button会出现如下的提示框：

当我的手机有网络时，点击的”login with facebook ”，会是如下效果：