AngularJSionic 页面传递参数

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”);  //声惠氏(WYETH)个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对应的页面时,浏览器控制台打字与印刷结果:

AngularJS 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.     }  

 

③ 、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. });  

AngularJS 2
④ 、使用H5本地存款和储蓄localStorage恐怕sessionStorage(还有indexDB,websql在数据量较大气象下采纳)

 

getItem //取记录

setItem//设置记录

removeItem//移除记录

key//取key所对应的值

clear//清除记录

键值对存款和储蓄,用法也是非凡简单,下边给出了常用的api,

相关文章