zoukankan      html  css  js  c++  java
  • Angular 缓存用父子路由 IOS下点击下一个选项导致的页面错乱

    现象:

    为了子页面返回父页面不刷新,需要用到子路由,如果没有表单,完全是没问题的,当父页面有表单输入,子页面中也有表单输入时,点击键盘的下一项会把父页面显示出来,如下图:

    上图中,是子路由界面,光表在最下行,当点击键盘所标注的下一项时,会出现像下图的现像,子页面和父页面同时出现。

    解决办法,当去子路由时,隐藏父路由,返回时再显示。写了一个全局的公用方法,如果有碰到相同问题,可以参考

    /*加载数据显示loading效果*/
            $rootScope.$on("$stateChangeSuccess", function(event, toState, toParams, fromState, fromParams) {
                // to be used for back button //won't work when page is reloaded.
                var fromParent = fromState.name.substring(0, fromState.name.lastIndexOf('.'));
                 var toParent = toState.name.substring(0, toState.name.lastIndexOf('.'));
                
                 //父路由去子路由启动loading,子路由返回到父路由时不启动
                 if(fromParent == toParent && (fromParent == '' || toParent == '') && typeof fromState.parent == 'undefined'
                    || fromParent.indexOf(toParent) == -1 && fromState.name.indexOf(toState.name) == -1
                    || fromState.name == toState.name
                    || typeof fromState.parent!='undefined' && fromState.parent != toState.name && toState.parent == fromState.name){
                        
                     $rootScope.startLoading();
                 }
                 /*
                  * 解决进入子view时父层view也有输入框时,在子view最后一个输入框点击下一项会弹出父层的bug
                  * 以下变量是隐藏显示父层时使用,变量为"子view名字"+View,例如,配置子view名字为sub,变量刚为subView
                  * 在父层要隐藏显示的地方用ng-show=‘!subView’
                  */
                 if(toState.views){
                     for(var key in toState.views){
                         if(toState.views.hasOwnProperty(key)){
                             $rootScope[ key +'View'] = true;
                         }
                         
                     }
                 }
                 if(fromState.views){
                     for(var key in fromState.views){
                         if(fromState.views.hasOwnProperty(key)){
                             $rootScope[key +'View'] = false;
                         }
                         
                     }
                 }
                   
            });
  • 相关阅读:
    17 中国天气网信息爬取
    16 select和css选择器(提取元素详解)
    15 Beautiful Soup(提取数据详解find_all())
    linux命令之tail命令
    Linux命令之ps命令
    Android使用Fiddler模拟弱网络环境测试
    发送邮件smtplib,email,邮件头header,定时器schedule,爬虫requests(转)
    python实现发送带附件的邮件 (转载)
    VMware centos 7 图形界面的分辨率和终端字体大小设置(转)
    docker-compose: 未找到命令
  • 原文地址:https://www.cnblogs.com/phen/p/8579384.html
Copyright © 2011-2022 走看看