详解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 相关文章推荐
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 Javascript
根据一段代码浅谈Javascript闭包
Dec 14 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
Vuex简单入门
Apr 19 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
vue 项目接口管理的实现
Jan 17 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 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的header和asp中的redirect比较
2006/10/09 PHP
php array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
php session的应用详细介绍
2017/03/22 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
python局部赋值的规则
2013/03/07 Python
Python实现方便使用的级联进度信息实例
2015/05/05 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
简单了解Python中的几种函数
2017/11/03 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
Python实现把类当做字典来访问
2019/12/16 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
啤酒销售实习自我鉴定
2013/09/24 职场文书
高中军训感言400字
2014/02/24 职场文书
2014年招生工作总结
2014/11/26 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python