ionic——关于断网替换断网页的问题

前段时间产品提出了一个新的需求，在网络中断的情况下，当前界面显示内容替换为特殊的断网界面

之前想的方法是添加遮罩层，但是产品要求保留头部信息，下拉刷新所以该种方法处理起来不是很好处理，

然后在网上查了一下，如何获取当前活动的路由的content，但是没有找到比较好得方法

只有在ionic web方式下，审查元素发现了一个规则，又有激活状态下的ion-view标签内的nav-view属性是为active的

好吧，开始搞！

找到网络检plugin插件

地址：cordova plugin add cordova-plugin-network-information

我通过路由的跳转成功事件 stateChangeSuccess，

设置特别页面不替换【app首页的三个界面和登录，注册等要求不替换】我通过全局搜索ion-view并且bav-view的值为active，替换我想要的内容，调试之后发现确实可以了，但是忽然发现在返回之后发现其他软件首页的三个界面变成无网界面了

审查元素发现，页面中存在多个激活状态的ion-view，然后审查元素发现他们的父级存在差别【<ion-nav-view>标签的nav-view属性不同，有的是cache，有的是active，原来是我的首页的三个界面设置的是缓存的，页面离开之后页面并没有销毁，只是进行隐藏处理了】，之后通过过滤父级元素进行判断，问题解决，代码如下

网络状态监听代码

$ionicPlatform.ready(function() {      
      // listen for Online event
      // 监听联网事件
      $rootScope.$on('$cordovaNetwork:online', function(event, networkState) {
        $rootScope.isOnLine = true;
      });

      // listen for Offline event
      // 监听断网那个事件
      $rootScope.$on('$cordovaNetwork:offline', function(event, networkState) {
        $rootScope.isOnLine = false;
      });
    });

 

路由监听代码

// 路由更换成功事件
$rootScope.$on('$stateChangeSuccess', function(e, toState) {
  // 断网检测【如果断网动态处理跳转问题】
  if (!$rootScope.isOnLine) {
      badRequestService.findContent();
  }
});

 

替换代码

// 查找界面中的ion-conten，并替换
var _findContent = function() {
  $timeout(function() {
    myToast.badrequest();
  }, 300);
  var cur_router = $state.current.name;
  if (_specialPages.indexOf(cur_router) === -1) {
    $timeout(function() {
      var active_view = $('ion-view');
      for (var i = active_view.length - 1; i >= 0; i--) {
        var parent_state = ($($(active_view[i]).parent()[0]).attr('nav-view') === 'active');
        var curr_state = $(active_view[i]).attr('nav-view') !== 'cached';
        if (parent_state && curr_state) {
          var curr_view = $(active_view[i]).find('ion-content');
          curr_view.html(_badRequestHtml);
          return;
        }
      }
    }, 100);
  }
};