Angular中$state.go页面跳转并传递参数的方法


Posted in Javascript onMay 09, 2017

遇到一个页面跳转的时候,在跳转后的页面获取跳转前页面的数据,我想到用一种是localstorage,一种用broadcast和on,然后老大说不用这么麻烦,既然都$state.go了直接带参数,这次就介绍一下$state.go页面跳转传递参数。

1.路由页面(注意这里要在路由上添加一个参数用于传递数据,不然在页面跳转的时候会filter)

.state("home.workpiece",{ // 跳转前的页面
   url:"/workpiece",
   views: {
    home: {
     templateUrl: prefix + "project/workpiece.html",
     controller: "workpieceCtrl"
    }
   }
  })
  .state("home.workpieceDetail",{  //跳转后的页面
   url:"/workpieceDetail?workpieceList",
   views: {
    home: {
     templateUrl: prefix + "project/workpiece_detail.html",
     controller: "workpieceDetailCtrl"
    }
   }
  })

    也可以将参数放在params中  

.state("home.workpieceDetail",{
   url:"/workpieceDetail",
   views: {
    home: {
     templateUrl: prefix + "project/workpiece_detail.html",
     controller: "workpieceDetailCtrl"
    }
   },
   params: {workpieceList:null}
  })

2.在workpieceCtrl中 

3.workpieceDetailCtrl中

这样就可以将在页面跳转的时候传递数据了。希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 Javascript
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
AngularJS的一些基本样式初窥
Jul 27 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
JavaScript实现修改伪类样式
Nov 27 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 #Javascript
JavaScript中splice与slice的区别
May 09 #Javascript
详解node中创建服务进程
May 09 #Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 #Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 #jQuery
微信小程序 标签传入数据
May 08 #Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 #Javascript
You might like
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
python处理xml文件的方法小结
2017/05/02 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
pandas map(),apply(),applymap()区别解析
2021/02/24 Python
应届生.NET方向面试题
2015/05/23 面试题
药学专业大专生的自我评价
2013/12/12 职场文书
幼儿教师思想汇报
2014/01/10 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
写给医生的感谢信
2015/01/22 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
springboot临时文件存储目录配置方式
2021/07/01 Java/Android
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python
教你nginx跳转配置的四种方式
2022/07/07 Servers