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 相关文章推荐
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
JavaScript基础语法之js表达式
Jun 07 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
javascript的delete运算符知识点总结
Nov 19 Javascript
javascript Number 与 Math对象的介绍
Nov 17 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写MySQL数据 实现代码
2009/06/15 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
pandas实现选取特定索引的行
2018/04/20 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
python批量修改ssh密码的实现
2019/08/08 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
安全生产投入制度
2014/01/29 职场文书
护士节活动总结
2014/08/29 职场文书
见习报告的格式
2014/11/04 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
初中运动会闭幕词范本3篇
2019/12/09 职场文书
python状态机transitions库详解
2021/06/02 Python