详解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 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
javascript中Object使用详解
Jan 26 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
浅谈React和Redux的连接react-redux
Dec 04 Javascript
基于vue 实现token验证的实例代码
Dec 14 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 Javascript
Vue接口封装的完整步骤记录
May 14 Vue.js
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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
PHP学习之PHP表达式
2006/10/09 PHP
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
ajax+php控制所有后台函数调用
2015/07/15 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
Prototype Object对象 学习
2009/07/12 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
浅谈MySQL中的触发器
2015/05/05 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
Django 路由控制的实现代码
2018/11/08 Python
python requests post多层字典的方法
2018/12/27 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
python中的插入排序的简单用法
2021/01/19 Python
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
实习工作表现评语
2014/12/31 职场文书
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers