详解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 星级评分效果(手写)
Dec 24 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
May 11 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 Javascript
浅析JavaScript中的变量提升
Jun 01 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字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
qTip2 精致的基于jQuery提示信息插件
2012/02/17 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
angular4自定义组件详解
2017/09/28 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
Python实现约瑟夫环问题的方法
2016/05/03 Python
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
美国知名生活购物网站:Goop
2017/11/03 全球购物
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
请用Python写一个获取用户输入数字,并根据数字大小输出不同信息的脚本
2014/05/20 面试题
入职担保书怎么写
2014/05/12 职场文书
实习单位鉴定意见
2015/06/04 职场文书
超强台风观后感
2015/06/09 职场文书
思想品德课教学反思
2016/02/24 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript
ES6 解构赋值的原理及运用
2021/05/25 Javascript
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers
Python中tqdm的使用和例子
2022/09/23 Python