解决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 浏览器事件介绍
Mar 30 Javascript
js网页版计算器的简单实现
Jul 02 Javascript
js读取配置文件自写
Feb 11 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
JS中递归函数
Jun 17 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 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
PHP nl2br函数 将换行字符转成 <br>
2009/08/21 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
js 动态选中下拉框
2009/11/26 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
js控制input输入字符解析
2013/12/27 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
nodejs初始化init的示例代码
2018/10/10 NodeJs
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
python实现探测socket和web服务示例
2014/03/28 Python
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
python模块smtplib学习
2018/05/22 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
体育专业学生自我评价范文
2014/01/17 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
教师自荐信范文
2015/03/06 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
周一给客户的问候语
2015/11/10 职场文书
MySQL 常见存储引擎的优劣
2021/06/02 MySQL
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技