解决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 相关文章推荐
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
node.js 使用ejs模板引擎时后缀换成.html
Apr 22 Javascript
javascript中alert()与console.log()的区别
Aug 26 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
一个可复用的vue分页组件
May 15 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 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一些常用的正则表达式字符的一些转换
2008/07/29 PHP
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
php session的锁和并发
2016/01/22 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
jQuery Ajax文件上传(php)
2009/06/16 Javascript
js 异步处理进度条
2010/04/01 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
python机器学习之神经网络(三)
2017/12/20 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
高中生毕业学习总结的自我评价
2013/11/14 职场文书
行政文秘岗位职责范本
2014/02/10 职场文书
旅游市场营销方案
2014/03/09 职场文书
绩效管理实施方案
2014/03/19 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书