详解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关于select的相关操作说明
Jan 13 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
AngularJS教程之MVC体系结构详解
Aug 16 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 Javascript
js常见遍历操作小结
Jun 06 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 Javascript
请求时token过期自动刷新token操作
Sep 11 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功能函数
2015/04/15 PHP
php实现对象克隆的方法
2015/06/20 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
微信小程序制作表格的方法
2019/02/14 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
Python操作SQLite简明教程
2014/07/10 Python
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
python邮件发送smtplib使用详解
2020/06/16 Python
详解python-图像处理(映射变换)
2019/03/22 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
详解如何减少python内存的消耗
2019/08/09 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
机械工程师的岗位职责
2013/11/17 职场文书
电子商务专业自我鉴定
2013/12/18 职场文书
人资专员岗位职责
2014/04/04 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
个人求职信格式范文
2015/03/20 职场文书
课题研究阶段性总结
2015/08/13 职场文书
解决python3安装pandas出错的问题
2021/05/20 Python