解决AngualrJS页面刷新导致异常显示问题


Posted in Javascript onApril 20, 2017

绪  

俗话说,细节决定成败,编程亦是如此。编程过程中我们可能会不自觉的忽视一些细节问题,殊不知,这些细节正是导致页面显示出现问题的地方。今略举一例,与君共勉之。

页面正常加载后,显示如下:

解决AngualrJS页面刷新导致异常显示问题

按F5刷新之后,页面如下所示:

解决AngualrJS页面刷新导致异常显示问题

很明显,页面显示出现了异常。回过头再看看Chrome的错误提示,

解决AngualrJS页面刷新导致异常显示问题

具体代码如下:

解决AngualrJS页面刷新导致异常显示问题

正是以上代码导致了错误的发生。

追根溯源

让我们回顾一下,错误到底是如何发生的。正常加载情况下,页面正常显示很容易理解,程序是按照既定的数据流走的。但是按F5刷新之后,$stateParams.uid已经不存在了,此时再次调用就会出现undefined的错误,导致页面加载出现异常。

如何解决这类问题呢?

首先应在语句执行之前添加变量判断语句,若变量存在且不为空,则可继续执行其它流程。代码如下:

$scope.pageNumber = 1; // 起始查询页码
  $scope.totalItems = 0; // 查询数据总数
  $scope.pageCnt = 1; // 初始化总页数
  if($stateParams.uid != "" && $stateParams.uid != null && typeof(instance.shopStatementDtl) != "undefined")
  {
  .................
  .................
  }

执行后效果:

解决AngualrJS页面刷新导致异常显示问题

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 Javascript
基于jQuery的history历史记录插件
Dec 11 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 Javascript
Javascript基础_简单比较undefined和null 值
Jun 14 Javascript
详解Eslint 配置及规则说明
Sep 10 Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
Vue.js实现模拟微信朋友圈开发demo
Apr 20 #Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 #Javascript
Vue如何引入远程JS文件
Apr 20 #Javascript
AngularJS改变元素显示状态
Apr 20 #Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 #Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 #Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 #Javascript
You might like
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
JSONP之我见
2015/03/24 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
javascript自定义日期比较函数用法示例
2019/07/22 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
Python中的魔法方法深入理解
2014/07/09 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
python内存管理机制原理详解
2019/08/12 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
西班牙语在线票务市场:SuperBoletería
2019/06/10 全球购物
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
一份全面的PHP面试问题考卷
2012/07/15 面试题
银行个人求职自荐信范文
2013/12/16 职场文书
教室标语大全
2014/06/21 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
对学校的意见和建议
2015/06/04 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL