详解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 相关文章推荐
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
Dec 29 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
js将键值对字符串转为json字符串的方法
Mar 30 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
Vue的生命周期操作示例
Sep 17 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 11 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/08/21 PHP
php学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
Chrome Web App开发小结
2014/09/04 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
php实现对象克隆的方法
2015/06/20 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
Python实现调度算法代码详解
2017/12/01 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
为什么称python为胶水语言
2020/06/16 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
伦敦最著名的老字号百货公司:Selfridges(塞尔福里奇百货)
2016/07/25 全球购物
广告学专业推荐信范文
2013/11/23 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
退学证明范本3篇
2014/10/29 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
勤俭节约主题班会
2015/08/13 职场文书
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS