详解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 相关文章推荐
javascript作用域和闭包使用详解
Apr 25 Javascript
javascript版2048小游戏
Mar 18 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
微信小程序自定义可滑动日历界面
Dec 28 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
vue.js的简单自动求和计算实例
Nov 08 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 Javascript
解决vue自定义指令导致的内存泄漏问题
Aug 04 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
星际争霸任务指南——虫族
2020/03/04 星际争霸
木翼下载系统中说明的PHP安全配置方法
2007/06/16 PHP
php 缩略图实现函数代码
2011/06/23 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
jquery ajax请求实例深入解析
2012/11/26 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
js数组操作学习总结
2013/11/04 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
使用Python的Django框架实现事务交易管理的教程
2015/04/20 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
Python JSON编解码方式原理详解
2020/01/20 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
转让协议书范本
2014/04/15 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python