今天,也是偶然发现有的初学者对ionic的传值还不太清除,这里我说明一下

例如你想在这个页面传递参数a、b过去,传递到"tab.wait"页面

$state.go("tab.wait",{a:123,b:456});等等后面可以跟很多参数

然后看 tab.wait

.state('tab.wait', {
url: '/tab_wait',
params:{"a":null,"b":null},
views: {
'tab-love': {
templateUrl: 'templates/wait.html',
controller: function($scope,$stateParams) {
$scope.hehe=$stateParams.a       -> 弹一下$scope.hehe,你就可以得到 123 因为a传过来的值是123
$scope.heihei=$stateParams.b     -> 弹一下$scope.heihei,你就可以得到 456 因为b传过来的值是456

}
}
}
})

如上所示,在路由tab.wait里面加入 params:{"a":null,"b":null}初始化一下,你有几个参数就把几个参数初始化
然后注入依赖,如在controller: function($scope,$ionicPopup,$timeout,$stateParams)里面注入$stateParams
然后你tab.wait对应的页面里面就可以获得到传过来的值了,如tab.wait页面里面有一个

<p>{{hehe}}</p>和

<p>{{heihei}}</p>
那就可以 $scope.hehe=$stateParams.a      -> 弹一下$scope.hehe,你就可以得到 123 因为a传过来的值是123,这是把传过来的东西$stateParams.a赋值给$scope.hehe,用于页面展示
$scope.heihei=$stateParams.b         -> 弹一下$scope.heihei,你就可以得到 456 因为b传过来的值是456,这是把传过来的东西$stateParams.b赋值给$scope.heihei,用于页面展示

这就是$state.go()的传值 ,ui-sref是一样的,只不过是在页面中把传值给传了,例如
ui-sref=“tab.detail({a: 1, b: 2})” 同样在目标页面注入 params:{"a":null,"b":null}记得这个params后边是个逗号,别忘了 ,注入依赖$stateParams ,然后根据$stateParams.a或者$stateParams.b拿到传过来的值

关于ionic传值的更多相关文章

  1. ionic路由传值

    ionic路由传值 app.js ===================================== //新建工作任务.state(‘app.newTask’, angularAMD.rout ...

  2. Ionic之页面传值

    很多时候,我们都进入一个页面往往都是需要将上一级的数据转入到下一级页面中使用,在传传统的html中时经过url来传值,所以ionic也是沿用了html中的方法. 但是还是有点区别于html.我们直接在 ...

  3. ionic 跨页面传值的几种方法

    1.使用AngularJS自带的$cacheFactory服务 $cacheFactory 从字面直译即为缓存工厂,可以用它来生成缓存对象,缓存对象以key-value的方式进行数据的存储,在整个应用 ...

  4. ionic 向路由中的templateUrl(模板页)传值

    .state('product', { url: '/product/:id', templateUrl: function ($routeParams) { return '/Product/Ind ...

  5. ionic单页面应用中微信分享的问题总结

    首先说一下 ionic 是单页面应用,也就是说整个项目就有一个index.html, 那么问题就就来了, 如果我们不同的页面要分享给大家的是不同的链接和图片,应该怎么去做呢? 这就是我们今天要总结的东 ...

  6. ionic 项目中添加modal的步骤流程

    1.首先在templates文件夹下面定义一个新页面,xxx.html,template文件夹在空项目里面是没有的,需要手动添加一个,放在WWW文件夹下面. <ion-modal-view> ...

  7. angular+ionic前后端分离开发项目中的使用

    Ionic基于AngularJS构建而成,所以学习一些AngularJS的知识很有必要.Ionic并没有独立开发一套完整的Web应用框架,而是对AngularJS进行了扩展,给它添加了大量界面组件和其 ...

  8. 如何把一个vue组件改为ionic/angular组件

    同是mvvm框架,他们之间是很相似的,如何你已经熟悉其中的一个,那么另一个也就基本上也就会的差不多了. 一.动态属性.值.事件绑定 vue中使用v-bind:或者之间分号:进行绑定 ng中左括号[]进 ...

  9. 移动端混合开发----ionic

    目前移动端分为三大主流:纯原生.混合开发.web App,随着手机硬件的升级,公司们似乎偏好于web页面开发,而混合开发相对纯web App似乎更受大公司青睐,所谓混合开发俾人理解为,原生代码(iOS ...

随机推荐

  1. HDU 蟠桃记

    蟠桃记 Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Submissio ...

  2. 设计模式17---设计模式之模板方法模式(Template Method)(行为型)

    1.场景模拟 使用软件模拟登录控制,普通用户和工作人员用户,工作人员的密码在数据库中是加密的. 步骤大致如下: 前台提交,后台获取登录信息,同数据库中的登陆信息进行比较,只不过工作人员是加密的,普通用 ...

  3. 【转】NSHashtable and NSMaptable

    本文转自Nidom的博客,原文:<NSHashtable & NSMaptable>   NSSet, NSDictionary, NSArray是Foundation框架关于集合 ...

  4. Spring框架快速入门之简介

    Spring是java平台上的一个开源应用框架.它的第一个版本是由Rod Johnson写出来的.Rod在他的Expert One-On- One Java EE Design and Develop ...

  5. iOS中你必须了解的多线程

    多线程概念详解 什么是进程? 简单的说进程就是我们电脑上运行的一个个应用程序,每一个程序就是一个进程,并且每个进程之间是独立的,每个进程运行在其专用受保护的内存空间内(window系统可以通过任务管理 ...

  6. div滚动条,可以自由的给滚动条定义背景,上下按钮,当然不仅仅是颜色,连图片当背景也可以。

    可以自由的给滚动条定义背景,上下按钮,当然不仅仅是颜色,连图片当背景也可以.支持鼠标滚轮,点击滚动条滚轴定位,上下按钮久按加速,兼容firefox,谷歌 下载地址

  7. 安全性良好的operator=操作,和新的new方法(针对深度复制的情况)

    class B { }; class A { public: A& operator=(const A& a) { B* temp = b; //这里解决重复赋值的方法是用temp指向 ...

  8. Retinex processing for automatic image enhancement 翻译

    Retinex processing for automatic image enhancement 摘要: 最近六七年来,人们从新燃起了对Retinex computation的兴趣,特别是在它对图 ...

  9. Sql Server批量停止作业

    CREATE Proc [dbo].[Proc_StopJob] as begin declare @I int declare @JobID uniqueidentifier -- 1. creat ...

  10. 用Ajax读取XML格式的数据

    ].firstChild.data);}catch(exception){ }}}}</script>