碼上快樂

相關內容    簡體    繁體

ionic 跨頁面傳值的幾種方法

本文轉載自   查看原文   2016-12-22 16:42   3001 

1、使用AngularJS自帶的$cacheFactory服務

$cacheFactory 從字面直譯即為緩存工廠，可以用它來生成緩存對象，緩存對象以key-value的方式進行數據的存儲，在整個應用內是單例的，可以在service或者controller中注入這個服務，然后就可以用它來自由的存取對象以及各種變量，下面是一個簡單例子

 

[javascript]  view plain  copy
 
  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);    //放入緩存對象  

 

 

[javascript]  view plain  copy
 
  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對應的頁面時，瀏覽器控制台打印結果：

 

$cacheFactory常用的幾個方位api如下：

- {{*}} get({string} key) — 返回與key對應的value值，如果未命中則返回undefined。
- {void} remove({string} key) — 從緩存中刪除一個鍵值對
- {void} removeAll() — 刪除所有緩存中的數據
- {void} destroy() — 刪除從$cacheFactory引用的這個緩存.

2、使用url傳參
例：playlists.htm頁面將 playlist.id 傳遞到 playlist頁面
[javascript]  view plain  copy
 
  1. <ion-item  href="#/app/playlists/{{playlist.id}}">  //playlists.html頁面  
[javascript]  view plain  copy
 
  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.   
  9.     var playlistId=$stateParams.playlistId;  //用$stateParams 取值  
  10.     console.log("playlistId："+playlistId);  
  11.   });  

 

 

需要注意的是必須在app.js路由中配置接受這個參數

 

[html]  view plain  copy
 
  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

 

[javascript]  view plain  copy
 
  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中取出變量

 

[javascript]  view plain  copy
 
  1. .controller('PlaylistCtrl', function ($scope, $stateParams, $cacheFactory,dataService) {  
  2.   console.log("sercice data:"+dataService.getData());  //得到data  
  3. });  

4、使用H5本地存儲localStorage或者sessionStorage（還有indexDB,websql在數據量較大情況下使用）

 

getItem //取記錄

setItem//設置記錄

removeItem//移除記錄

key//取key所對應的值

clear//清除記錄

鍵值對存儲，用法也是非常簡單，上面給出了常用的api，

1、使用AngularJS自帶的$cacheFactory服務

$cacheFactory 從字面直譯即為緩存工廠，可以用它來生成緩存對象，緩存對象以key-value的方式進行數據的存儲，在整個應用內是單例的，可以在service或者controller中注入這個服務，然后就可以用它來自由的存取對象以及各種變量，下面是一個簡單例子

 

[javascript]  view plain  copy
 
  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);    //放入緩存對象  

 

 

[javascript]  view plain  copy
 
  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對應的頁面時，瀏覽器控制台打印結果：

 

$cacheFactory常用的幾個方位api如下：

- {{*}} get({string} key) — 返回與key對應的value值，如果未命中則返回undefined。
- {void} remove({string} key) — 從緩存中刪除一個鍵值對
- {void} removeAll() — 刪除所有緩存中的數據
- {void} destroy() — 刪除從$cacheFactory引用的這個緩存.

2、使用url傳參
例：playlists.htm頁面將 playlist.id 傳遞到 playlist頁面
[javascript]  view plain  copy
 
  1. <ion-item  href="#/app/playlists/{{playlist.id}}">  //playlists.html頁面  
[javascript]  view plain  copy
 
  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.   
  9.     var playlistId=$stateParams.playlistId;  //用$stateParams 取值  
  10.     console.log("playlistId："+playlistId);  
  11.   });  

 

 

需要注意的是必須在app.js路由中配置接受這個參數

 

[html]  view plain  copy
 
  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

 

[javascript]  view plain  copy
 
  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中取出變量

 

[javascript]  view plain  copy
 
  1. .controller('PlaylistCtrl', function ($scope, $stateParams, $cacheFactory,dataService) {  
  2.   console.log("sercice data:"+dataService.getData());  //得到data  
  3. });  

4、使用H5本地存儲localStorage或者sessionStorage（還有indexDB,websql在數據量較大情況下使用）

 

getItem //取記錄

setItem//設置記錄

removeItem//移除記錄

key//取key所對應的值

clear//清除記錄

鍵值對存儲，用法也是非常簡單，上面給出了常用的api，


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 ASP.NET跨頁面傳值的幾種方法 PHP頁面間傳值的幾種方法 關於html頁面間傳值的幾種方法 html靜態頁面傳值的幾種方法 js實現頁面與頁面之間傳值的幾種方法優劣 C#跨窗體傳值的幾種方法分析（很詳細） C#跨窗體傳值的幾種方法分析（很詳細） C#跨窗體傳值的幾種方法分析（很詳細） ionic 刷新頁面的幾種方法 ionic2中跨頁面回傳值
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM