1. 程式人生 > >angularjs 頁面快取及動態重新整理解決方案

angularjs 頁面快取及動態重新整理解決方案

一、準備工作

  框架:angularjs 

  ui元件庫:ionic1  

二、頁面快取cache

  路由設定cache引數,true為快取,false為不快取,程式碼如下:

angular.module('app',["AppCtrl"])   //依賴注入AppCtrl控制器module
.config(function($stateProvider){
$stateProvider
.state("home",{
    url:"/home",    //定義路由的名稱
    templateUrl:"./home.html",    //
html檢視相對路徑 controller:"AppCtrl", //定義檢視對應對的控制,需要注入 cache:true //設定快取,true為頁面快取,false不快取 }) })

三、動態重新整理

  使用ionic元件ion-view的生命週期來跳過快取,達到動態重新整理的效果(頁面使用ion-view容器)

  可以通過設定一個全域性變數(定義的方式很多,也可以設定一個sessionStorage來充當變數),然後if語句來判斷是否執行enter鉤子裡面的程式碼。

$scope.$on('$ionicView.enter', function
() { //每次進入頁面都會執行enter鉤子 });

  ion-view還有很多的鉤子方法:

 

  $ionicView.beforeEnter 

  $ionicView.enter

  $ionicView.afterEnter

  $ionicView.beforeLeave

  $ionicView.leave

 

  $ionicView.afterLeave

  $ionicView.unloaded

  合理的使用就能達到很多我們需要的效果。