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了

相关文章
|
存储 JavaScript 前端开发
AngularJS学习笔记--002--Angular JS路由插件ui.router源码解析
路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分。 那么,对于angular而言,它自然也有内置的路由模块:叫做ngRoute。 不过,大家很少用它,因为它的功能太有限,往往不能满足开发需求!! 于是,一个基于ngRoute开发的第三方路由模块,叫做ui.router,受到了大家的“追捧
1804 0
Angularjs怎样通过ui-router传参
Angularjs中通过url传递参数
5546 0
|
Go JavaScript
AngularJs ui-router 路由的简单介绍
之前有写过一篇关于Angular自带的路由:ngRoute。今天来说说Angular的第三方路由:ui-router。那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router呢?这里简单明了的说明下ngRoute和ui-router的区别吧,其实也没很大的区别,主要的就是ngRoute针对于单视图,而ui-router可用于多视图(这里说的视图是指在页面内我们可控制的,可变化的区域)。
1143 0
angularjs中ng-route和ui-router简单用法的代码比较
1、使用ng-route:<br><p>app.js中的写法:</p> <p></p> <pre name="code" class="javascript">var app=angular.module('birthdayApp',['ngRoute']); app.config(function($routeProvider){ $routeProvider
2171 0
|
8天前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
1月前
|
开发框架 JavaScript 前端开发
鸿蒙NEXT开发声明式UI是咋回事?
【10月更文挑战第15天】鸿蒙NEXT的声明式UI基于ArkTS,提供高效简洁的开发体验。ArkTS扩展了TypeScript,支持声明式UI描述、自定义组件及状态管理。ArkUI框架则提供了丰富的组件、布局计算和动画能力。开发者仅需关注数据变化,UI将自动更新,简化了开发流程。此外,其前后端分层设计与编译时优化确保了高性能运行,利于生态发展。通过组件创建、状态管理和渲染控制等方式,开发者能快速构建高质量的鸿蒙应用。
114 3
下一篇
无影云桌面