详解angularjs跨页面传参遇到的一些问题


Posted in Javascript onNovember 01, 2018

上周写课程选择时间功能时需要将课程ID,星期,节次等参数传递给下一个页面,就查了查angularjs的ui-router跨页面传参,一开始是这样写的:

在app.js下添加 params:{'args':{}}

详解angularjs跨页面传参遇到的一些问题

然后在起始页面的控制器中使用transtionTo或者go方法传递参数

详解angularjs跨页面传参遇到的一些问题

最后在目标页面的控制器使用$stateParams接收参数,如下图,可知我需要传输的参数都传了过来

详解angularjs跨页面传参遇到的一些问题

这样传参的好处就是方便灵活,但有一个不好的地方就是每次刷新完以后传递过来的参数都会丢失,是所以我最后放弃了这种写法,改成了传统的url传参,如下图:

详解angularjs跨页面传参遇到的一些问题

这样一来就每次刷新就不会丢失数据了,因为参数都存到了路径当中,但接下来就发生了一个比较诡异的事情:
我明明已经给$scope.week赋了值,而且控制台确实打印了出来,而我再打印一次$scope时却发现$scope.week根本没有被赋值,如下图:

详解angularjs跨页面传参遇到的一些问题

我觉得这不是我能力范围之内能解决的问题了,便请求了张喜硕学长,学长试了各种方法,最后无奈将我控制器里所有其他的代码都注释掉,只保留上述代码,依然无法解决,最后查看v层排错,才找到了万恶之源,原来是我用了ng-value,只要将ng-value改成value,问题就正常解决了。

详解angularjs跨页面传参遇到的一些问题

总结

通过这次遇到的问题反映出我解决问题的能力还是不够,一旦遇到非常奇怪的bug就手足无措,不知道该怎么排查错误。再不济也可以把我改动过的代码注释一半留一半,总是能找到问题的源头的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js比较和逻辑运算符的介绍
Mar 10 Javascript
node.js入门教程
Jun 01 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
JavaScript实现页面5秒后自动跳转的方法
Apr 16 Javascript
Javascript验证方法大全
Sep 21 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
React生命周期原理与用法踩坑笔记
Apr 28 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 Javascript
Vue.js 事件修饰符的使用教程
Nov 01 #Javascript
微信小程序实现蒙版弹窗效果
Nov 01 #Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 #Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 #Javascript
微信小程序实现留言板
Oct 31 #Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 #Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 #Javascript
You might like
关于PHP实现异步操作的研究
2013/02/03 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
jquery 插件学习(四)
2012/08/06 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
django session完成状态保持的方法
2018/11/27 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
Android面试题附答案
2014/12/08 面试题
如何用SQL语句进行模糊查找
2015/09/25 面试题
.NET常见笔试题集
2012/12/01 面试题
金融专业推荐信
2013/11/14 职场文书
怎么写有吸引力的自荐信
2013/11/17 职场文书
知识竞赛活动方案
2014/02/18 职场文书
青年文明号创建承诺
2014/03/31 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
应急管理培训方案
2014/06/12 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书