解决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 相关文章推荐
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
浅析vue深复制
Jan 29 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
Apr 17 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
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代码
2008/04/09 PHP
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
2019/09/30 PHP
调试php程序的简单步骤
2019/10/04 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
DOM下的节点属性和操作小结
2009/05/14 Javascript
无阻塞加载脚本分析[全]
2011/01/20 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
python中while循环语句用法简单实例
2015/05/07 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
python实现图片上添加图片
2019/11/26 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
50岁生日感言
2014/01/23 职场文书
京剧自荐信
2014/01/26 职场文书
节能减排倡议书
2014/04/15 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
单位租车协议书
2015/01/29 职场文书
护士求职自荐信范文
2015/03/04 职场文书