解决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 相关文章推荐
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 Javascript
JS脚本defer的作用示例介绍
Jan 02 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 Javascript
浅析$(function) ready和onload 的区别
Sep 03 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
深入了解javascript 数组的sort方法
Jun 01 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
关于js陀螺仪的理解分析
Apr 11 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数组去重复数据示例
2014/02/25 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
dojo随手记 gird组件引用
2011/02/24 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
javascript date格式化示例
2013/09/25 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
JavaScript中的编码和解码函数
2017/02/15 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
javascriptvoid(0)含义以及与"#"的区别讲解
2019/01/19 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
python代码实现ID3决策树算法
2017/12/20 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
Python的argparse库使用详解
2018/10/09 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
营业经理岗位职责
2013/11/10 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
铣工实训报告
2014/11/05 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
保护环境的宣传语
2015/07/13 职场文书
初一军训感言
2015/08/01 职场文书
Go并发4种方法简明讲解
2022/04/06 Golang
Django中celery的使用项目实例
2022/07/07 Python
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL