解决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 相关文章推荐
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
jquery live()调用不存在的解决方法
Feb 26 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
JavaScript File分段上传
Mar 10 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
详解在React项目中安装并使用Less(用法总结)
Mar 18 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 Javascript
JS sort排序详细使用方法示例解析
Sep 27 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 Javascript
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
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
一览画面点击复选框后获取多个id值的方法
2016/05/30 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
js实现时间日期校验
2020/05/26 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
跟老齐学Python之print详解
2014/09/28 Python
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
python字典的常用操作方法小结
2016/05/16 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
Java程序员面试题
2013/07/15 面试题
好的演讲稿开场白
2013/12/30 职场文书
乌鸦喝水教学反思
2014/02/07 职场文书
实习生岗位职责
2014/04/12 职场文书
药店促销活动总结
2014/07/10 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
大学军训的体会
2014/11/08 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
Python selenium的这三种等待方式一定要会!
2021/06/10 Python
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android