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 相关文章推荐
jQuery下通过replace字符串替换实现大小图片切换
May 22 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 Javascript
vue 动态生成拓扑图的示例
Jan 03 Vue.js
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
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
phplot生成图片类用法详解
2015/01/06 PHP
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
Vue3为什么这么快
2020/09/23 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
python实现C4.5决策树算法
2018/08/29 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
Python设计密码强度校验程序
2020/07/30 Python
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
教师节宣传方案
2014/05/23 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
mysql如何查询连续记录
2022/05/11 MySQL