ionic 页面传递参数

1、使用AngularJS自带的$cacheFactory服务

$cacheFactory
从字面直译即为缓存工厂,可以据此她来特别成缓存对象,缓存对象为key-value的法子开展数据的囤积,在总体应用内是单例的,可以于service或者controller中流入这服务,然后便可以就此它们来随便的存取对象同各种变量,下面是一个简约例子

 

  1. .controller(‘AppCtrl’, function ($scope, $ionicModal, $timeout, $cacheFactory) {  
  2.   
  3.   var user = {name: ‘jax’, age: 18, sex: ‘男’};  
  4.   var user_cache = $cacheFactory(“user_cache”);  //声明一个user_cache缓存对象    
  5.   user_cache.put(“lol”,user);    //放入缓存对象  

 

 

  1. .controller(‘PlaylistCtrl’, function ($scope, $stateParams, $cacheFactory) {  
  2.     var user_cache = $cacheFactory.get(“user_cache”);   //取出名吗user_cache的缓存对象  
  3.     var user = user_cache.get(“lol”);   //取出缓存对象吃键值为lol的目标  
  4.     // user_cache.remove(“lol”);  //删除键值为lol对应的值  
  5.     // user_cache.removeAll(); //清除缓存对象被具有的键值对  
  6.     // user_cache.destroy(); //销毁user_cache缓存对象  
  7.     console.log(user);  
  8.   });  

 

当打AppCtrl对应页面切换至PlaylistCtrl对应之页面时,浏览器控制台打印结果:

图片 1

 

$cacheFactory常用之几个方向api如下:

{{*}} get({string} key)
返回与key对应的value值,如果未命中虽归undefined

  • {void} remove({string} key) — 从缓存中去一个键值对
  • {void} removeAll() — 删除所有缓存中的数量
  • {void} destroy() — 删除从$cacheFactory援的这缓存.

2、使用url传参

例:playlists.htm页面将 playlist.id 传递到 playlist页面

  1. <ion-item  href=”#/app/playlists/{{playlist.id}}”>  //playlists.html页面  

  2. .controller(‘PlaylistCtrl’, function ($scope, $stateParams, $cacheFactory) {  

  3.     var user_cache = $cacheFactory.get(“user_cache”);   //取出名吗user_cache的缓存对象  
  4.     var user = user_cache.get(“lol”);   //取出缓存对象中键值为lol的对象  
  5.     // user_cache.remove(“lol”);  //删除键值为lol对应的值  
  6.     // user_cache.removeAll(); //清除缓存对象吃有所的键值对  
  7.     // user_cache.destroy(); //销毁user_cache缓存对象  
  8.     console.log(user);  
  9.   
  10.     var playlistId=$stateParams.playlistId;  //用$stateParams 取值  
  11.     console.log(“playlistId:”+playlistId);  
  12.   });  

 

 

内需专注的是要在app.js路由中配置接受这参数

 

  1. .state(‘app.single’, {  
  2.     url: ‘/playlists/:playlistId’,  //配置多个参数用:a/:b/:c  
  3.     views: {  
  4.       ‘menuContent’: {  
  5.         templateUrl: ‘templates/playlist.html’,  
  6.         controller: ‘PlaylistCtrl’  
  7.       }  
  8.     }  

 

3、service或者factory传值(service跟factory中都是单例模式,定义的变量在一切应用内唯一)

概念变量data

 

  1. angular.module(‘starter.controllers’, [])  
  2.   .service(‘dataService’,function () {  
  3.       var data=”I come from service”;  //定义变量  
  4.     return{  
  5.       getData:function () {  
  6.         return data;  
  7.       }  
  8.     }  
  9.   })  

 

 

于controller中取出变量

 

  1. .controller(‘PlaylistCtrl’, function ($scope, $stateParams, $cacheFactory,dataService) {  
  2.   console.log(“sercice data:”+dataService.getData());  //得到data  
  3. });  

图片 2
4、使用H5本地存储localStorage或者sessionStorage(还有indexDB,websql在数据量较生场面下用)

 

getItem //取记录

setItem//设置记录

removeItem//移除记录

key//取key所对应之价值

clear//清除记录

键值对存储,用法吗是非常简单,上面给起了常用的api,

相关文章