解决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 相关文章推荐
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
JavaScript字符串对象
Jan 14 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
小程序实现tab标签页
Nov 16 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
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
javascript中callee与caller的用法和应用场景
2010/12/08 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
详解Python中的join()函数的用法
2015/04/07 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
python如何代码集体右移
2020/07/20 Python
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
美国批发供应商:Kole Imports
2019/04/10 全球购物
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
楼面经理岗位职责范本
2014/02/18 职场文书
中班中秋节活动反思
2014/02/18 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
大学新闻系自荐书
2014/05/31 职场文书
2014年中秋寄语
2014/08/11 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书