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;
                     }

                 }
             }

        });

原文地址:https://www.cnblogs.com/phen/p/8579384.html

时间: 2024-10-11 10:24:22

Angular 缓存用父子路由 IOS下点击下一个选项导致的页面错乱的相关文章

获取下拉框第一个选项的值、最后一个选项的值、第二个选项的值

//假设网页里有下面这样一个下拉框 <select id="angelweb"> <option value=1>1</option> <option value=2>2</option> <option value=3>3</option> <option value=4>4</option> <option value=5>5</option> <

angular学习笔记(十七)-路由和切换视图

本篇介绍angular中如何通过判断url的hash值来显示不同的视图模板,并使用不同的控制器: 下面,通过一个例子,来一步一步说明它的用法: 我们要做一个邮箱应用,打开的时候显示的是邮件列表: 然后点击邮件主题,可以查看该邮件的详细内容: 点击返回列表,再回到列表页 一. 创建index页面: <!DOCTYPE html> <html> <head> <title>14.1路由和视图切换</title> <meta charset=&q

iOS上架——Windows系统下直接上架

之前用跨平台开发工具开发了一个应用,平台可以同时生成安卓版和苹果版,想着也把这应用上架到App Store试试,于是找同学借了个苹果开发者账号,但没那么简单,还要用到Mac电脑的钥匙串申请发布证书和上传ipa,可没有Mac,同学的大老远的也不方便拿过来用,然后捣鼓了个虚拟机,卡的我怀疑人生,后面找到了一个工具,在Windows环境下终于上传成功,把我的iOS app上架流程分享给各位. 下面从七个步骤进行详细介绍! 1.创建唯一标示符App IDs 2.申请发布证书 3.申请发布描述文件 4.i

iOS开发之单例模式下的初始化方法

iOS开发之单例模式下的初始化方法 一般的单例我们会这么写 +(instancetype)sharedXXXManager{ static XXXManager *sharedXXXManagerInstance = nil; static dispatch_once_t predicate; dispatch_once(&predicate,^{ sharedXXXManagerInstance = [[XXXManager alloc] initPrivate]; }); return sh

iOS学习之路--下拉刷新和上拉加载更多

iOS学习之路--下拉刷新和上拉加载更多 简介 本文中笔者将和大家分享应用app中常用到的表单内容的下拉刷新和上拉加载更多的功能实现的方法. 内容 1.有哪些实现方法与各方法的优劣 使用过美团,大众点评的朋友们应该有注意到,当你向上滑动表单的时候会有更多的店铺加载进你的表单中,而当你下滑表单顶的时候,则会刷新表单的内容并从网络上获取最新的信息.通过下拉刷新和上拉加载更多的功能,使app可以获取更多用户想要的信息和获取最新的信息.那么这种功能如何实现呢,还请跟着笔者继续往下看. 目前来说,主要的实

13.交换路由IOS系统备份与恢复

交换路由的镜像突然挂了肿么办呐?没关系我有解决方法嘿嘿! 传输协议: v FTP:文件传输协议,应用层协议,用于文件传输. v TFTP:轻型文件传输协议,应用层协议,用于小文件传输. v Xmodem:异步文件运输协议,应用层协议,使用拨号调制解调器传输,传输效率低. CISCO思科交换路由设备 使用FTP传输协议对交换路由IOS系统进行备份与恢复: v PC搭建好FTP服务器,搭建FTP服务器的小工具有Server-U等. v 交换路由设备中配置FTP服务器用户名和密码. (config)#

iOS 在 ARC 环境下 dealloc 的使用、理解误区

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. 下图最后一句话,解开了俺接触 ARC 以来一直的误解: 在 ARC 环境下,重载的 dealloc 方法一样会被调用,只不过,不能在该方法的实现中

Swift技术之如何在iOS 8下使用Swift设计一个自定义的输入法 (主要是NSLayoutConstraint 的使用)

当前位置: > Swift新手入门 > Swift技术之如何在iOS 8下使用Swift设计一个自定义的输入法 时间:2014-09-10 16:49来源:未知 作者:啊成 举报 点击:562次 我会复习一下有关键盘扩展的内容,然后通过使用iOS 8中的新应用扩展API的设计一个摩斯码的输入法.完成这个教程大约需要花费20分钟.完整代码 概览 通过使用自定义输入法替换系统输入法,用户可以实现一些特别的功能.例如一个特别新颖的输入方式,或输入iOS原生并不支持的语言.自定义输入法的基本功能很简单

Angular JS 学习之路由

1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/first/page,但在单页Web应用中AngularJS通过#+标记实现,例如: http://runoob.com/#/first http://runoob.com/#/second http://runoob.com/#/third 3.当我们点击以上的任意的一个链接时,向服务端请的地址都是一样的