详解AngularJS跨页面传值(ui-router)


Posted in Javascript onAugust 23, 2017

博主用的ionic 这里使用ui-router传值,用来在跳转页面的同时带着你想带走的东西一起跳走

(PS:博主半路出家,尚是菜鸟,写的东西自己跑起来并没有什么问题但不敢保证写的一定对,语言也很随意,仅供参考。另,期待各位前辈的指教)

博主用的ionic

这里使用ui-router传值,用来在跳转页面的同时带着你想带走的东西一起跳走

需求是这样的,我有一个商品单子(概览页),点一个商品就可以去看它的详情(详情页)
要解决的问题就是把概览页被点击的商品的id传给详情页,详情页拿着这个id给后台,后台返回对应的需要的json

下面开始实现

.controller('CafeCtrl', function($scope, cafeData, $state) { //往外传值的controller里加一个$state
 $scope.cafeList = cafeData.All();
 $scope.goDetail = function(id) {
  $state.go('itemDetail',{sort : "cafe", id : id}); //就拿它传
 };
})

在传值的一行:

$state.go('itemDetail',{sort : "cafe", id : id});
//前面的是变量名,后边的是值

我的理解是:塞了两个变量到一个中转的名叫$stateParams的什么东西里面,controller里面写法就是这样子的,页面上ng-click="goDetail(item.id)"调用它就可以了

app.js里,接收值的页面(详情页).state这么写,留两个位置给刚才传出来的东西

.state('itemDetail', {
 url: '/itemDetail/:sort/:id/', //这里就是那两个要传的东西,名字要对应相同
 templateUrl: 'templates/itemDetail.html',
 controller: 'ItemDetailCtrl'
})

然后再去接收值的页面(详情页)接收这俩值存俩对象里面(接受并存下了传来的两个值)

.controller('ItemDetailCtrl', function($scope, $stateParams, $state) { //加个$stateParams
 $scope.sort = $stateParams.sort;
 $scope.itemId = $stateParams.id;
})

在上面加个$stateParams,然后下面scope一个对象,把你要的值从$stateParams里面拿点儿出来赋值给它就ok了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
使用js 设置url参数
Jul 08 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
jquery插件orbit.js实现图片折叠轮换特效
Apr 14 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
浅谈angular4实际项目搭建总结
Dec 01 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
vue中页面跳转拦截器的实现方法
Aug 23 #Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 #jQuery
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 #Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 #Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 #jQuery
浅谈vue-lazyload实现的详细过程
Aug 22 #Javascript
关于定制FileField中的上传文件名称问题
Aug 22 #Javascript
You might like
分享PHP入门的学习方法
2007/01/02 PHP
PHP 创建标签云函数代码
2010/05/26 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
php格式化日期实例分析
2014/11/12 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&”)
2016/12/23 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
js数组去重的方法总结
2019/01/18 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
python paramiko实现ssh远程访问的方法
2013/12/03 Python
Python中的index()方法使用教程
2015/05/18 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
业务经理岗位职责
2013/11/11 职场文书
中学教师自我鉴定
2014/02/07 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
策划总监岗位职责
2014/02/16 职场文书
医院信息公开实施方案
2014/05/09 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
项目投资意向书范本
2015/05/09 职场文书
文化大革命观后感
2015/06/17 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
Python多个MP4合成视频的实现方法
2021/07/16 Python
Oracle 触发器trigger使用案例
2022/02/24 Oracle
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS