详解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 相关文章推荐
最新优化收藏到网摘代码(digg,diigo)
Feb 07 Javascript
几款极品的javascript压缩混淆工具
May 16 Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
微信小程序 教程之WXSS
Oct 18 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
原生js实现轮播图的示例代码
Feb 20 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
vue子传父关于.sync与$emit的实现
Nov 05 Javascript
如何在 Vue 表单中处理图片
Jan 26 Vue.js
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 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
使用axios请求接口,几种content-type的区别详解
2019/10/29 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
Python functools模块学习总结
2015/05/09 Python
Python实现简单字典树的方法
2016/04/29 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
python如何读取bin文件并下发串口
2019/07/05 Python
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
比较一下entity bean和session bean
2013/12/27 面试题
电子技术专业中专生的自我评价
2013/12/17 职场文书
学习经验交流会主持词
2014/04/01 职场文书
大学专科求职信
2014/07/02 职场文书
环保项目建议书
2014/08/26 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
python编程实现清理微信重复缓存文件
2021/11/01 Python
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL