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 ”,会是如下效果:
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值