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数组处理多个字符串的连接问题
Aug 20 Javascript
JS获取地址栏参数的几种方法小结
Feb 28 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
Sep 17 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
vue element-ui读取pdf文件的方法
Nov 26 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教程 基本语法
2009/10/23 PHP
php中的观察者模式
2010/03/24 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
python3下载抖音视频的完整代码
2019/06/05 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
安全检查验收制度
2014/01/12 职场文书
小学家长评语大全
2014/04/16 职场文书
工厂搬迁方案
2014/05/11 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
老人节标语大全
2014/10/08 职场文书
数学教师个人总结
2015/02/06 职场文书
辩论赛新闻稿
2015/07/17 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android
python中Matplotlib绘制直线的实例代码
2021/07/04 Python
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android