详解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 相关文章推荐
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
详解Node.js读写中文内容文件操作
Oct 10 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 Javascript
详细分析vue表单数据的绑定
Jul 20 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 和 XML: 使用expat函数(一)
2006/10/09 PHP
简单的页面缓冲技术
2006/10/09 PHP
网友原创的PHP模板类代码
2008/09/07 PHP
php程序内部post数据的方法
2015/03/31 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
新闻内页-JS分页
2006/06/07 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
基于jquery实现在线选座订座之影院篇
2015/08/24 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
vscode 远程调试python的方法
2017/12/01 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
通过实例解析Python return运行原理
2020/03/04 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
教师自我反思材料
2014/02/14 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
婚礼答谢词范文
2015/09/29 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang