详解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 EasyUI 中文API Button使用实例
Apr 14 Javascript
判断访客终端类型集锦
Jun 05 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
基于JavaScript实现随机颜色输入框
Dec 10 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
JavaScript实现的浏览器下载文件的方法
Aug 09 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
vue+axios实现post文件下载
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
php中的boolean(布尔)类型详解
2013/10/28 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
PHP网络操作函数汇总
2015/05/18 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
Javascript浅谈之引用类型
2013/12/18 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
canvas的神奇用法
2017/02/03 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
Python中set与frozenset方法和区别详解
2016/05/23 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
Python对切片命名的实现方法
2018/10/16 Python
python按照多个条件排序的方法
2019/02/08 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
python移位运算的实现
2019/07/15 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
临床医学应届生求职信
2013/11/06 职场文书
教师师德反思材料
2014/02/15 职场文书
计算机专业自荐信
2014/05/24 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
幼师辞职信范文
2015/02/27 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python