解决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 相关文章推荐
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
chrome不支持form.submit的解决方案
Apr 28 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
js获取文件里面的所有文件名(实例)
Oct 17 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
JavaScript函数重载操作实例浅析
May 02 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 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下将XML转换为数组
2010/01/01 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
浅析python协程相关概念
2018/01/20 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
python如何保证输入键入数字的方法
2019/08/23 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
python def 定义函数,调用函数方式
2020/06/02 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
写给妈妈的道歉信
2014/01/11 职场文书
公司企业表扬信
2014/01/11 职场文书
班级文化建设标语
2014/06/23 职场文书
党员身份证明材料
2015/06/19 职场文书
小学数学教学随笔
2015/08/14 职场文书
提档介绍信范文
2015/10/22 职场文书
《黄道婆》教学反思
2016/02/22 职场文书
终止合同协议书范本
2016/03/22 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis