解决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 相关文章推荐
JQuery从头学起第一讲
Jul 04 Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
jQuery实现带延迟效果的滑动菜单代码
Sep 02 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
layui的table中显示图片方法
Aug 17 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 Javascript
js基于canvas实现时钟组件
Feb 07 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的历史和优缺点
2006/10/09 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python多线程编程方式分析示例详解
2013/12/06 Python
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
Python学习小技巧总结
2018/06/10 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
5款实用的python 工具推荐
2020/10/13 Python
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
当当网软件测试笔试题
2015/11/24 面试题
参观考察邀请函范文
2014/01/29 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
2016新年年会主持词
2015/07/06 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python