Just a Computer Graphics Studio & My Life

在寫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

Advertisements

發表留言

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

標籤雲

%d 位部落客按了讚: