详解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 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
javascript 命名空间以提高代码重用性
Nov 13 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 Javascript
vue跳转方式(打开新页面)及传参操作示例
Jan 26 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 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 self与$this的详解
2013/06/08 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
微信小程序搜索组件wxSearch实例详解
2017/06/08 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
windows下安装python paramiko模块的代码
2013/02/10 Python
Python通过poll实现异步IO的方法
2015/06/04 Python
Python输出各行命令详解
2018/02/01 Python
Python面向对象进阶学习
2019/05/21 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
python读取指定字节长度的文本方法
2019/08/27 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
Python super()函数使用及多重继承
2020/05/06 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
会计专业个人求职信范文
2014/01/08 职场文书
2014年公司庆元旦活动方案
2014/03/05 职场文书
个人担保书范文
2014/05/20 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
离婚协议书范文2016
2016/03/18 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android