今天發現目前的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)
}
}
})
注意在控制器中引入
如下是我的當前頁面:
當我的手機沒有網絡時,點擊圖中兩個button會出現如下的提示框:
當我的手機有網絡時,點擊的”login with facebook ”,會是如下效果: