解决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 解析读取XML文档 实例代码
Jul 07 Javascript
javascript 继承实现方法
Aug 26 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
vue判断按钮是否可以点击
Apr 09 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
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
用nodejs写的一个简单项目打包工具
2013/05/11 NodeJs
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
理解 JavaScript Scoping & Hoisting(二)
2015/11/18 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
JavaScript实现世界各地时间显示
2020/09/07 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
盘点提高 Python 代码效率的方法
2014/07/03 Python
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
Python selenium如何设置等待时间
2016/09/15 Python
Python之str操作方法(详解)
2017/06/19 Python
深入浅出学习python装饰器
2017/09/29 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
医学护理系毕业生求职信
2013/10/01 职场文书
小学生自我鉴定
2013/10/12 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
关键在于落实心得体会
2014/09/03 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书