详解AngularJS跨页面传值（ui-router）

博主用的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了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Angular页面间切换及传值的4种方法

    本文实例为大家分享了Angular JS页面间切换及传值 的方法,供大家参考,具体内容如下Angular JS页面间切换及传值 1. 基于ui-router的页面跳转传参 (1) 在AngularJS的app.js中用ui-router定义路由,比如现在有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的producer页,同时将producerId这个参数传过去. state('producers', { url: '/produ

  • Angular.js中控制器之间的传值详解

    前言 每个controller都会有自己的scope,所有的scope都是属于 $rootScope的子或者子的子... 那么问题就好解决了,通过 $rootScope.$broadcast 广播的事件每个controller都能收到事件 另外,我的经验是,尽量不要用event传数据.应该建立一个service来保存数据,并且设置相应getter/setter,具体如下: 每个controller依赖service, call service.setter(...) 统一的service.set

  • 详解AngularJS跨页面传值（ui-router）

    博主用的ionic 这里使用ui-router传值,用来在跳转页面的同时带着你想带走的东西一起跳走 (PS:博主半路出家,尚是菜鸟,写的东西自己跑起来并没有什么问题但不敢保证写的一定对,语言也很随意,仅供参考.另,期待各位前辈的指教) 博主用的ionic 这里使用ui-router传值,用来在跳转页面的同时带着你想带走的东西一起跳走 需求是这样的,我有一个商品单子(概览页),点一个商品就可以去看它的详情(详情页) 要解决的问题就是把概览页被点击的商品的id传给详情页,详情页拿着这个id给后台,后

  • 详解angularjs跨页面传参遇到的一些问题

    上周写课程选择时间功能时需要将课程ID,星期,节次等参数传递给下一个页面,就查了查angularjs的ui-router跨页面传参,一开始是这样写的: 在app.js下添加 params:{'args':{}} 然后在起始页面的控制器中使用transtionTo或者go方法传递参数 最后在目标页面的控制器使用$stateParams接收参数,如下图,可知我需要传输的参数都传了过来 这样传参的好处就是方便灵活,但有一个不好的地方就是每次刷新完以后传递过来的参数都会丢失,是所以我最后放弃了这种写法,

  • 详解angularjs实现echart图表效果最简洁教程

    详解angularjs实现echart图表效果最简洁教程

    本文介绍了详解angularjs实现echart图表效果最简洁教程,分享给大家,具体如下: ehcart是百度做的数据图表,基于原生js.接口和配置都写的很好很易读,还可以用于商用. 一 echart包引用 下载解压,放入lib中. 下载地址:echart_jb51.rar 并在index.html中引用如图两个js文件. app.js中引用angular-echarts 二 页面 html页面 <!--饼图--> <div> <donut-chart config=&quo

  • 详解js跨域请求的两种方式，支持post请求

    JSONP实现跨域 常用的jquery实现跨域调用 $.ajax({ url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php", dataType: "jsonp", jsonp: "callback", context: document.body, success: function(data) { console.log(data); } }); 这个调用实际上

  • 详解Android跨进程通信之AIDL

    详解Android跨进程通信之AIDL

    需求描述 进程A调起第三方进程B进行第三方登录 – 实现双向通信 代码(进程A) 1.目录结构 2.LoginActivity.java public class LoginActivity extends AppCompatActivity { private ILoginInterface iLogin; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceSta

  • 详解AngularJS中$filter过滤器使用(自定义过滤器)

    1.内置过滤器 * $filter 过滤器,是angularJs中用来处理数据以更好的方式展示给我用户.比如格式化日期,转换大小写等等. * 过滤器即有内置过滤器也支持自定义过滤器.内置过滤器很多,可以百度.关键是如何使用: * 1.在HTML中直接使用内置过滤器 * 2.在js代码中使用内置过滤器 * 3.自定义过滤器 * * (1)常用内置过滤器 * number 数字过滤器,可以设置保留数字小数点后几位等 * date 时间格式化过滤器,可自己设置时间格式 * filter 过滤的数据一般

  • 详解angularjs获取元素以及angular.element()用法

    本文介绍了详解angularjs获取元素以及angular.element()用法 ,分享给大家,具体如下: addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 attr() - 获取匹配的元素集合中的第一个元素的属性的值 bind() - 为一个元素绑定一个事件处理程序 children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选

  • 详解AngularJS中的表单验证(推荐)

    详解AngularJS中的表单验证(推荐)

    AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则式,很方便的完成验证,理论上所有的验证都可以用正则式完成 //javascript $scope.mobileRegx = "^1(3[0-9]|4[57]|5[0-35-9]|7[01678]|8[0-9])\\d{8}$"; $scope.emailRegx = "^[a-z]([a-z0-9]*[-_]?

  • 详解AngularJS ng-class样式切换

    详解AngularJS ng-class样式切换

    整理文档,搜刮出一个详解AngularJS ng-class样式切换,稍微整理精简一下做下分享. 1.HTML <ion-view> <ion-content> <div class="button-bar"> <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[isFirst]" ng-click="isFirst = !isFirst"&g

  • 详解浏览器渲染页面过程

    详解浏览器渲染页面过程 1.解析HTML文件,创建DOM树 自上而下,遇到任何样式(link.style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载). 2.解析CSS 优先级:浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式: 特定级:id数*100+类或伪类数*10+tag名称*1 3.将CSS与DOM合并,构建渲染树(renderingtree) DOM树与HTML一一对应,渲染树会忽略诸如head.display:none的元素

随机推荐