解决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的Repeater实现代码
Jul 17 Javascript
Jquery上传插件 uploadify v3.1使用说明
Jun 18 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 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
BBS(php & mysql)完整版(八)
2006/10/09 PHP
php数组使用规则分析
2015/02/27 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
Js Jquery创建一个弹出层可加载一个页面
2014/05/08 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
Vue $attrs & inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
饭店工作计划书
2014/01/10 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
学习礼仪心得体会
2014/09/01 职场文书
售房协议书范本2014
2014/10/23 职场文书
白酒代理协议书范本
2014/10/26 职场文书
MySQL分库分表详情
2021/09/25 MySQL