详解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 相关文章推荐
javascript天然的迭代器
Oct 29 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
javascript实现计时器的简单方法
Feb 21 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
p5.js临摹旋转爱心
Oct 23 Javascript
关于Vue Router的10条高级技巧总结
May 06 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
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
PHP多文件上传类实例
2015/03/07 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
python实现读取命令行参数的方法
2015/05/22 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
Python读取YAML文件过程详解
2019/12/30 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
二手房买卖协议书
2014/04/10 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
大学校园招聘会感想
2015/08/10 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers