解决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中的Document文档对象
Jan 16 Javascript
点击下载链接 弹出页面实现代码
Oct 01 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
浅谈React之状态(State)
Sep 19 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 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
S900/ ETON E1-XM 收音机
2021/03/02 无线电
codeigniter框架批量插入数据
2014/01/09 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
js 操作符汇总
2014/11/08 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
Angular路由简单学习
2016/12/26 Javascript
js 调用百度分享功能
2017/02/27 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
vue mounted组件的使用
2018/06/18 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
司机岗位职责
2013/11/15 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
大二学习计划书范文
2014/04/27 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
计划生育诚信协议书
2014/11/02 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
javascript函数式编程基础
2021/09/15 Javascript
spring boot实现文件上传
2022/08/14 Java/Android