解决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 相关文章推荐
js资料prototype 属性
Mar 13 Javascript
实现web打印的各种方法介绍及实现代码
Jan 09 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
Vue渲染过程浅析
Mar 14 Javascript
tsconfig.json配置详解
May 17 Javascript
vue滚动tab跟随切换效果
Jun 29 Javascript
JS中如何优雅的使用async await详解
Oct 05 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
一个用于MySQL的PHP XML类
2006/10/09 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
2019/08/03 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
js获取图片长和宽度的代码
2009/11/24 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
2019/06/06 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
Python3之文件读写操作的实例讲解
2018/01/23 Python
Python中的pack和unpack的使用
2018/03/12 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
美国温暖商店:The Warming Store
2018/12/15 全球购物
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
Python中如何定义一个函数
2016/09/06 面试题
入党申请书自我鉴定
2013/10/12 职场文书
4s客服专员岗位职责
2013/12/01 职场文书
励志演讲稿500字
2014/08/21 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
感恩教师节主题班会
2015/08/12 职场文书
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python