详解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 相关文章推荐
js中巧用cssText属性批量操作样式
Mar 13 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
JS中处理与当前时间间隔的函数代码
May 23 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 Javascript
javascript日期计算实例分析
Jun 29 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 Javascript
Vue中引入svg图标的两种方式
Jan 14 Vue.js
jquery实现穿梭框功能
Jan 19 jQuery
原生js实现自定义滚动条组件
Jan 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 存储文本换行实现方法
2010/01/05 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
用实例分析Python中method的参数传递过程
2015/04/02 Python
python3实现短网址和数字相互转换的方法
2015/04/28 Python
Python itertools模块详解
2015/05/09 Python
python3.6使用pickle序列化class的方法
2018/10/22 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
python deque模块简单使用代码实例
2020/03/12 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
夜大自我鉴定
2013/10/31 职场文书
优秀求职自荐信怎样写
2013/12/18 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
广告宣传策划方案
2014/05/21 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
Kubernetes控制节点的部署
2022/04/01 Servers
MySQL深分页问题解决思路
2022/12/24 MySQL