详解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 相关文章推荐
wordpress之js库集合研究介绍
Aug 17 Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
js使用递归解析xml
Dec 12 Javascript
Bootstrap 布局组件(全)
Jul 18 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 Javascript
jQuery快速高效制作网页交互特效
Feb 24 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 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
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
Python标准库sched模块使用指南
2017/07/06 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
python交换两个变量的值方法
2019/01/12 Python
python解析含有重复key的json方法
2019/01/22 Python
Django工程的分层结构详解
2019/07/18 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
python爬虫搭配起Bilibili唧唧的流程分析
2020/12/01 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
应届生.NET方向面试题
2015/05/23 面试题
车辆维修工自我评价怎么写
2013/09/20 职场文书
会计助理岗位职责
2014/02/17 职场文书
小学生元旦感言
2014/02/26 职场文书
学校食堂管理制度
2015/08/04 职场文书
bat批处理之字符串操作的实现
2022/03/16 Python