详解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 相关文章推荐
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
JavaScript中的this机制
Jan 30 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 Javascript
js截取字符串功能的实现方法
Sep 27 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 Javascript
Javascript confirm多种使用方法解析
Sep 25 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
DC动漫人物排行
2020/03/03 欧美动漫
php-fpm开启状态统计的方法详解
2017/06/23 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
javascript 简练的几个函数
2009/08/29 Javascript
jquery下json数组的操作实现代码
2010/08/09 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
python实现多进程代码示例
2018/10/31 Python
浅谈python3中input输入的使用
2019/08/02 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
大学生应聘推荐信范文
2013/11/19 职场文书
组织关系转移介绍信
2014/01/16 职场文书
医学生自我鉴定范文
2014/03/26 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
教师批评与自我批评(群众路线)
2014/10/15 职场文书
2014年村官工作总结
2014/11/24 职场文书
争先创优个人总结
2015/03/04 职场文书
护士自荐信范文
2015/03/25 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书