解决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实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
JS返回只包含数字类型的数组实例分析
Dec 16 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
详解JavaScript栈内存与堆内存
Apr 04 Javascript
vue移动端使用canvas签名的实现
Jan 15 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定时执行任务设置详解
2015/02/06 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
jQuery事件详解
2017/02/23 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
Python实例一个类背后发生了什么
2016/02/09 Python
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
详解Python requests 超时和重试的方法
2018/12/18 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
精彩的大学生自我评价
2013/11/17 职场文书
教师先进工作者事迹材料
2014/05/01 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
刑事案件上诉状
2015/05/23 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
Go Plugins插件的实现方式
2021/08/07 Golang
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs