解决AngualrJS页面刷新导致异常显示问题

 更新时间:2017年04月20日 10:26:09   作者:孙华强  
本篇文章主要介绍了解决AngualrJS页面刷新导致异常显示问题的方法。具有很好的参考价值。下面跟着小编一起来看下吧

绪  

俗话说,细节决定成败,编程亦是如此。编程过程中我们可能会不自觉的忽视一些细节问题,殊不知,这些细节正是导致页面显示出现问题的地方。今略举一例,与君共勉之。

页面正常加载后,显示如下:

按F5刷新之后,页面如下所示:

很明显,页面显示出现了异常。回过头再看看Chrome的错误提示,

具体代码如下:

正是以上代码导致了错误的发生。

追根溯源

让我们回顾一下,错误到底是如何发生的。正常加载情况下,页面正常显示很容易理解,程序是按照既定的数据流走的。但是按F5刷新之后,$stateParams.uid已经不存在了,此时再次调用就会出现undefined的错误,导致页面加载出现异常。

如何解决这类问题呢?

首先应在语句执行之前添加变量判断语句,若变量存在且不为空,则可继续执行其它流程。代码如下:

  $scope.pageNumber = 1; // 起始查询页码
  $scope.totalItems = 0; // 查询数据总数
  $scope.pageCnt = 1; // 初始化总页数
  if($stateParams.uid != "" && $stateParams.uid != null && typeof(instance.shopStatementDtl) != "undefined")
  {
  .................
  .................
  }

执行后效果:

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

相关文章

  • angular4响应式表单与校验实现demo

    angular4响应式表单与校验实现demo

    这篇文章主要介绍了angular4响应式表单与校验实现demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • angular.fromJson与toJson方法用法示例

    angular.fromJson与toJson方法用法示例

    这篇文章主要介绍了angular.fromJson与toJson方法用法,结合实例形式分析了AngularJS使用fromJson与toJson方法进行json格式数据的解析与转换相关操作技巧,需要的朋友可以参考下
    2017-05-05
  • Angularjs中使用Filters详解

    Angularjs中使用Filters详解

    本文给大家总结了下在Angularjs的模板、控制器、或者服务中使用Filters的方法,有需要的小伙伴可以参考下
    2016-03-03
  • angularJS利用ng-repeat遍历二维数组的实例代码

    angularJS利用ng-repeat遍历二维数组的实例代码

    本篇文章主要介绍了angularJS利用ng-repeat遍历二维数组的实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • ionic使用angularjs表单验证(模板验证)

    ionic使用angularjs表单验证(模板验证)

    能够验证用户在表单中输入的内容是否合理与正确是十分重要的,这篇文章主要介绍了ionic使用angularjs表单验证(模板验证),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • AngularJS中使用HTML5手机摄像头拍照

    AngularJS中使用HTML5手机摄像头拍照

    这篇文章主要介绍了AngularJS中使用HTML5手机摄像头拍照的相关资料,需要的朋友可以参考下
    2016-02-02
  • Angular进行简单单元测试的实现方法实例

    Angular进行简单单元测试的实现方法实例

    这篇文章主要给大家介绍了关于Angular进行简单单元测试的实现方法,文中仅用了几行代码,文中通过示例代码介绍的非常详细,对大家学习或者使用Angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-08-08
  • angular-ui-sortable实现可拖拽排序列表

    angular-ui-sortable实现可拖拽排序列表

    这篇文章主要介绍了angular-ui-sortable实现可拖拽排序列表,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • angularJs 表格添加删除修改查询方法

    angularJs 表格添加删除修改查询方法

    下面小编就为大家分享一篇angularJs 表格添加删除修改查询方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • AngularJS基础 ng-open 指令简单实例

    AngularJS基础 ng-open 指令简单实例

    本文主要介绍AngularJS ng-open 指令,这里帮大家整理了ng-open指令的基本资料,有需要的小伙伴可以参考下
    2016-08-08

最新评论