详解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 相关文章推荐
Div自动滚动到末尾的代码
Oct 26 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
Mac下安装vue
Apr 11 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 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学习 运算符与运算符优先级
2008/06/15 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
网页中的图片的处理方法与代码
2009/11/26 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
js中document.write的那点事
2014/12/12 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
JavaScript无阻塞加载和defer、async详解
2017/02/26 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
实例讲解Python中的私有属性
2014/08/21 Python
Python中标准模块importlib详解
2017/04/16 Python
python删除文本中行数标签的方法
2018/05/31 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
简单的命令查看安装的python版本号
2020/08/28 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
vue+django实现下载文件的示例
2021/03/24 Vue.js
编辑找工作求职信分享
2014/01/03 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
个人思想政治总结
2015/03/05 职场文书
2015选调生工作总结
2015/07/24 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技