ionic 页面传递参数
2024-10-12 07:36:54
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);
- });
需要注意的是必须在app.js路由中配置接受这个参数
- .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中取出变量
- .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,
最新文章
- Smart210---学习记录 竞态与并发
- JMeter性能测试介绍学习一
- POJ 1042 Gone Fishing
- Aspose.Cells 导入导出EXCEL(转)
- JQ绑定事件(1.9已经废除了live()等绑定事件方法,on()方法是官方推荐的绑定事件的一个方法)
- 屌丝程序猿赚钱之道 之APP
- 几个字符串的误区,以及setlocale函数的使用
- asp.net MVC过滤器的用法(转)
- iOS第三方库
- [USACO08JAN]手机网络Cell Phone Network
- python 数据驱动(ddt)
- BZOJ2001 HNOI2010 城市建设
- 对DataTable(或者DataSet)修改后,提交修改到数据库
- JavaScript Date 时间对象方法
- Python高阶函数之 - 装饰器
- Java多线程(十)——线程优先级和守护线程
- #1479 : 三等分(树形DP)
- 创建java项目思路
- CocoStudio
- 【失败】CentOS 6.5安装VNCserver 并开启远程桌面