Just My Life & My Work

[Ionic] 視圖生命週期 (Ionic View Life Cycle)

2016 年 10 月 29 日

在寫iOS Native App時早已知道視圖生命週期 (View Life Cycle)非常重要，因為它會決定我們接下來時做的流程。現在使用Ionic同樣也有視圖生命週期 (Ionic View Life Cycle)，現在就稍微來瞭解其前後關係吧！

Ionic View Life Cycle.jpg

實作的部分跟iOS同樣是寫在Controller中。

$scope.$on('$ionicView.loaded', function(){
  // Anything you can think of
});
$scope.$on('$ionicView.enter', function(){
  // Anything you can think of
});
$scope.$on('$ionicView.leave', function(){
  // Anything you can think of
});
$scope.$on('$ionicView.beforeEnter', function(){
  // Anything you can think of
});
$scope.$on('$ionicView.afterEnter', function(){
  // Anything you can think of
});
$scope.$on('$ionicView.beforeLeave', function(){
  // Anything you can think of
});
$scope.$on('$ionicView.afterLeave', function(){
  // Anything you can think of
});
$scope.$on('$ionicView.unloaded', function(){
  // Anything you can think of
});

FIRST TIME VIEW INITIALIZATION

  1. View 1 – loaded
  2. View 1 – beforeEnter
  3. View 1 – enter
  4. View 1 – afterEnter

TRANSITION FROM ONE VIEW TO ANOTHER

  1. View 2 – loaded
  2. View 2 – beforeEnter
  3. View 1 – beforeLeave
  4. View 2 – enter
  5. View 1 – leave
  6. View 2 – afterEnter
  7. View 1 – afterLeave

名稱不太一樣，然而原理差不多，所以只要多寫幾次，就熟能生巧。

參考：Ionic View Life Cycle。

分類：

Ionic, 教學

發表留言

Tagged with:

隨意留個言吧：）～

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。

標籤雲