今天,也是偶然发现有的初学者对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. openfire连接登陆优化方案

    client登陆openfire,大概总共须要9个来回才完毕登录. 在2G情况下.就表现为client登录特别慢,所以,为解决问题,对openfire进行了例如以下优化 openfire的连接.登陆过 ...

  2. hdu4893Wow! Such Sequence! (线段树)

    Problem Description Recently, Doge got a funny birthday present from his new friend, Protein Tiger f ...

  3. Myeclipse 中添加mysql的jdbc驱动

    打开myeclipse后单击菜单栏中的myeclipse——>preferences 然后在Myeclipse Enterprise workbench下的Java Enterprise Pro ...

  4. android studio 更改快捷键为eclipse中习惯的方式

    虽然之前看了不少android studio的快捷键,但主要开发依然还是在eclipse上,仍然不习惯android studio的快捷键方式,今天看一视频说可以改快捷键为eclipse的方式,不由得 ...

  5. SELinux 与强制访问控制系统

    SELinux 全称 Security Enhanced Linux (安全强化 Linux),是 MAC (Mandatory Access Control,强制访问控制系统)的一个实现,目的在于明 ...

  6. Nginx常见502错误

    1.配置错误因为nginx找不到php-fpm了,所以报错,一般是fastcgi_pass后面的路径配置错误了,后面可以是socket或者是ip:port2.资源耗尽lnmp架构在处理php时,ngi ...

  7. django: urlconfig

    django 的 url 配置主要在 urls.py 中进行 urlconfig 中对 url 的处理方式主要在: 一 视图处理方式 如 上文 例子所示: url(r'^blog/index/$', ...

  8. windows身份验证,那么sqlserver的连接字符串的

    Data Source=计算机名称或ip地址;Initial Catalog=数据库名称;Integrated Security=True windows身份验证不需要psw的Provider=SQL ...

  9. c - 冒泡/选择排序.

    #include <stdio.h> #define LEN 10 #define TRUE 1 #define FALSE 0 /* 对 10 个数进行排序 */ //选择排序法(值得注 ...

  10. Swift中的便利构造器和构造器链

    import UIKit // 1.一个类中至少有一个指定构造器, 其必须负责初始化类中所有的实例存储属性 // 2.便利构造器属于次要的, 辅助性的构造器 // 3.类中可以不定义便利构造器, 便利 ...