ionic项目中跨页面传递参数的几种方式
来源:互联网 发布:php mysql防止sql注入 编辑:程序博客网 时间:2024/05/16 05:15
1、使用angularjs自带的$cacheFactory服务
$cacheFactory 从字面直译即为缓存工厂,可以用它来生成缓存对象,缓存对象以key-value的方式进行数据的存储,在整个应用内是单例的,可以在service或者controller中注入这个服务,然后就可以用它来自由的存取对象以及各种变量,下面是一个简单例子
.controller('AppCtrl', function ($scope, $ionicModal, $timeout, $cacheFactory) { var user = {name: 'jax', age: 18, sex: '男'}; var user_cache = $cacheFactory("user_cache"); //声明一个user_cache缓存对象 user_cache.put("lol",user); //放入缓存对象
.controller('PlaylistCtrl', function ($scope, $stateParams, $cacheFactory) { var user_cache = $cacheFactory.get("user_cache"); //取出名为user_cache的缓存对象 var user = user_cache.get("lol"); //取出缓存对象中键值为lol的对象 // user_cache.remove("lol"); //删除键值为lol对应的值 // user_cache.removeAll(); //清除缓存对象中所有的键值对 // user_cache.destroy(); //销毁user_cache缓存对象 console.log(user); });
当从AppCtrl对应页面切换到PlaylistCtrl对应的页面时,浏览器控制台打印结果:
$cacheFactory常用的几个方位api如下:
- {{*}}
get({string} key)
— 返回与key
对应的value
值,如果未命中则返回undefined
。
- {void}
remove({string} key)
— 从缓存中删除一个键值对
- {void}
removeAll()
— 删除所有缓存中的数据
- {void}
destroy()
— 删除从$cacheFactory
引用的这个缓存.
2、使用url传参
例:playlists.htm页面将 playlist.id 传递到 playlist页面
<ion-item href="#/app/playlists/{{playlist.id}}"> //playlists.html页面
.controller('PlaylistCtrl', function ($scope, $stateParams, $cacheFactory) { var user_cache = $cacheFactory.get("user_cache"); //取出名为user_cache的缓存对象 var user = user_cache.get("lol"); //取出缓存对象中键值为lol的对象 // user_cache.remove("lol"); //删除键值为lol对应的值 // user_cache.removeAll(); //清除缓存对象中所有的键值对 // user_cache.destroy(); //销毁user_cache缓存对象 console.log(user); var playlistId=$stateParams.playlistId; //用$stateParams 取值 console.log("playlistId:"+playlistId); });
.state('app.single', { url: '/playlists/:playlistId', //配置多个参数用:a/:b/:c views: { 'menuContent': { templateUrl: 'templates/playlist.html', controller: 'PlaylistCtrl' } }
3、service或者factory传值(service跟factory中都是单例模式,定义的变量在整个应用内唯一)
定义变量data
angular.module('starter.controllers', []) .service('dataService',function () { var data="I come from service"; //定义变量 return{ getData:function () { return data; } } })
.controller('PlaylistCtrl', function ($scope, $stateParams, $cacheFactory,dataService) { console.log("sercice data:"+dataService.getData()); //得到data });
4、使用H5本地存储localStorage或者sessionStorage(还有indexDB,websql在数据量较大情况下使用)
getItem //取记录
setItem//设置记录
removeItem//移除记录
key//取key所对应的值
clear//清除记录
键值对存储,用法也是非常简单,上面给出了常用的api, 2 0
- ionic项目中跨页面传递参数的几种方式
- 不同页面之间实现参数传递的几种方式
- JSP中页面向Action传递参数的几种方式
- JSP中页面向Action传递参数的几种方式
- JSP中页面向Action传递参数的几种方式
- ASP中页面之间传递值的几种方式
- 在asp.net中参数传递的几种方式
- Ionic 跳转页面时的参数传递
- 静态参数传递的几种方式
- 实现参数传递的几种方式
- 不同页面之间实现参数传递的几种方式讨论
- 【笔试题】不同页面之间实现参数传递的几种方式
- 几种参数传递方式
- .net中常用的几种页面间传递参数的方法
- .net中常用的几种页面间传递参数的方法
- .net中常用的几种页面间传递参数的方法
- .net中常用的几种页面间传递参数的方法
- asp.net中常用的几种页面间传递参数的方法,及各自优缺点
- 表单提交,getjson
- 细数iOS上的那些安全防护
- 李开复给大学生的第5封信:你有选择的权利
- scala中的apply和update方法
- ERROR: role "data" cannot be dropped because some objects depend on it
- ionic项目中跨页面传递参数的几种方式
- 如何有效的清除Android中无用的资源(静态代码分析)
- JavaScriptCore实战练习精品文章
- 使用shell 脚本做简单的压力测试
- 禁用缓存案例
- iOS屏幕旋转的监测
- jiecaovideo开源项目笔记-JCVideoPlayer分析-全屏逻辑
- linphone呼叫流程分析
- mysql主从复制配置