详解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 相关文章推荐
没有document.getElementByName方法
Aug 19 Javascript
JavaScript执行顺序详细介绍
Dec 04 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
使用js画图之圆、弧、扇形
Jan 12 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 Javascript
Vue全家桶入门基础教程
May 14 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中的登陆login
2007/01/18 PHP
简化php模板页面中分页代码的解析
2009/02/06 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
纯javascript版日历控件
2016/11/24 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
详解weex默认webpack.config.js改造
2018/01/08 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
跟老齐学Python之永远强大的函数
2014/09/14 Python
python中类的一些方法分析
2014/09/25 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
Pytorch 中的optimizer使用说明
2021/03/03 Python
人事助理岗位职责
2013/11/18 职场文书
军训自我鉴定200字
2014/02/13 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
小学教师评语大全
2014/04/23 职场文书
个性与发展自我评价
2015/03/06 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python