angularjs跨页面传参遇到的一些问题

上周写课程选择时间功能时需要将课程ID，星期，节次等参数传递给下一个页面，就查了查angularjs的ui-router跨页面传参，一开始是这样写的:
在app.js下添加 params:{'args':{}}

然后在起始页面的控制器中使用transtionTo或者go方法传递参数

最后在目标页面的控制器使用$stateParams接收参数，如下图，可知我需要传输的参数都传了过来

这样传参的好处就是方便灵活，但有一个不好的地方就是每次刷新完以后传递过来的参数都会丢失，是所以我最后放弃了这种写法，改成了传统的url传参，如下图：

这样一来就每次刷新就不会丢失数据了，因为参数都存到了路径当中，但接下来就发生了一个比较诡异的事情：
我明明已经给$scope.week赋了值，而且控制台确实打印了出来，而我再打印一次$scope时却发现$scope.week根本没有被赋值，如下图：

我觉得这不是我能力范围之内能解决的问题了，便请求了张喜硕学长，学长试了各种方法，最后无奈将我控制器里所有其他的代码都注释掉，只保留上述代码，依然无法解决，最后查看v层排错，才找到了万恶之源，原来是我用了ng-value，只要将ng-value改成value，问题就正常解决了。

总结

通过这次遇到的问题反映出我解决问题的能力还是不够，一旦遇到非常奇怪的bug就手足无措，不知道该怎么排查错误。再不济也可以把我改动过的代码注释一半留一半，总是能找到问题的源头的。

angularjs跨页面传参遇到的一些问题相关推荐

微信小程序使用onfire.js（事件订阅和分发JavaScript 库）实现跨页面传参，对onfire的全面了解
开发微信小程序时,页面间数据传送多采用URL方式传参.添加全局变量,对于在本地缓存不大实用(感觉操作缓存,应该性能会有一定的损耗吧).而从新打开的页面回到之前的界面,貌似只有放在本地缓存.添加全局变量 ...
AngularJS中页面传参方法
1.基于ui-router的页面跳转传参 (1) 用ui-router定义路由,比如有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的 ...
uni-app如何跨页面传参
场景:编辑用户资料页面,点击设置昵称,需要跳转到编辑昵称页面,之后点击确定再返回到编辑昵称页面,这个时候需要将编辑好的昵称传到编辑昵称页面显示. uni-app给我们提供了一个方法:跨页面通信首先, ...
JavaScript 利用location对象实现跨页面传参
需求简述: 两个页面login.html和homepage.html,在login页输入用户名,点击登录会跳转到主页,主页拿到login页输入的用户名实现思路: 1. 跳转:修改location.h ...
【小程序】跨页面传参通信 onfire.js
在小程序开发过程中,难免会遇到一种情况,当A页面需要用户设置数据点击进入B页面,在B页面设置成功后返回并将设置的值传递给A页面.但是wx.navigateBack()并不支持返回传参.这种情况下就可 ...
微信小程序作品集实例：跨页面传参，数据库，换行，空格，css
审美是病,得治. 从左到右依次,初始界面,点一下,进入第二个作者目录,点击李贺,进入第三个作品目录,点击马诗二十三首,进入第四个作品详情,第五个是结构,◀▶切换前后. 依次往下捋, data里面pos ...
uniapp页面传参使用encodeURIComponent转义特殊符号
答主在uniapp页面跳转传imgUrl(地址为:https://metting.oss-cn-beijing.aliyuncs.com/20210615153312771.9AT5NO.jpg?Ex ...
vue页面传参（多个参数传值）与接参 - 代码篇
index.js路由规则设定: /searchResult/syyName=:syyName 发送页面: //传参页面 this.$router.push({name: 'SearchResult', ...
Strut2页面传参跳转 --Struts2
1.本案例借助struts2框架,完成页面传参.跳转功能 2.代码实现 index.jsp: <form action="helloStruts2.action" metho ...

angularjs跨页面传参遇到的一些问题

总结

angularjs跨页面传参遇到的一些问题相关推荐

最新文章

热门文章