ionic 導航


ion-nav-view

當使用者在你的app中瀏覽時，ionic能夠偵測到瀏覽歷史。透過偵測瀏覽歷史，實現向左或向右滑動時可以正確轉換視圖。

採用AngularUI路由器模組等應用程式介面可以分為不同的$state(狀態)。 Angular的核心為路由服務，URLs可以用來控制視圖。

AngularUI路由提供了一個更強大的狀態管理，即狀態可以被命名，嵌套， 以及合併視圖，允許一個以上模板呈現在同一個頁面。

此外，每個狀態無需綁定到一個URL，並且資料可以更靈活地推送到每個狀態。

以下實例中，我們將建立一個應用程式中包含不同狀態的導航視圖。

我們的標記中選擇ionNavView作為頂層指令。顯示一個頁眉欄我們用 ionNavBar 指令透過導航更新。

接下來，我們需要設定我們的將要渲染的狀態值。 


var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider) {
  $stateProvider
  .state('index', {
    url: '/',
    templateUrl: 'home.html'
  })
  .state('music', {
    url: '/music',
    templateUrl: 'music.html'
  });
});

再開啟應用，$stateProvider 會查詢url, 看是否符合 index 狀態值, 再載入index.html到<ion-nav-view>。


頁面載入都是透過URLs配置的。在Angular中創建模板最簡單的方式就是直接將他放到html模板文件中並且用<script type="text/ng-template"w> 包含。


所以這也是一種方式將Home.html加入到我們的APP中：

<script id="home" type="text/ng-template">
  <!-- The title of the ion-view will be shown on the navbar -->
  <ion-view view-title="Home">
    <ion-content ng-controller="HomeCtrl">
      <!-- The content of the page -->
      <a href="#/music">Go to music page!</a>
    </ion-content>
  </ion-view>
</script>


這是一個很好的方法，因為模板會很快的載入並被快取就不同透過網路再去加載。

快取


通常情況下，視圖都被快取了能提升效能。當跳出視圖時，他的元素被保留在Dom中，並且它的作用也從 $watch 中移除。


當我們跳到一個已經被快取了的視圖，視圖會被激活，它的作用於被重新連接上，Dom中也保存了他的元素。這也允許保持以前的視圖滾動位置。

快取也可以透過很多方式來開啟和關閉的。預設Ionic將最大快取頁面數為10個，並且這並不是唯一可以自訂的，應用程式可以明確狀態來設定視圖應不應該被快取。

注意，因為我們是快取這些視圖，我們沒有破壞作用於. 相反, 它的作用於也從 $watch 中移除。

因為接下來的觀看作用域並沒有被摧毀和重建，控制器也沒再次載入。如果app/controller需要知道何時進入或離開一個視圖，再視圖事件從 ionView 作用內發出, 例如 $ionicView.enter， 可能是有用的。

全域停用快取

$ionicConfigProvider 可以用來設定最大允許快取的視圖數量，透過設定為0來停用所有快取。 

$ionicConfigProvider.views.maxCache(0);

在STATE PROVIDER中停用快取

$stateProvider.state('myState', {
   cache: false,
   url : '/myUrl',
   templateUrl : 'my-template.html'
})

透過屬性停用快取

<ion-view cache-view="false" view-title="My Title!">
  ...
</ion-view>

AngularUI 路由

請造訪 AngularUI Router's docs 了解更多。

API

屬性類型#詳情
name
(可選)
字串

一個視圖的名字。這個名字應該是在相同的狀態下其他視圖中唯一的。你可以在不同的狀態中有相同名稱的視圖。欲了解詳細信息，請查看ui-router的 ui-view 文件。

ion-view

#隸屬於ionNavView。 一個內容的容器，用於展示視圖或導覽列資訊。

下面是一個帶有"我的頁面"標題的導覽列載入頁面的範例。 

<ion-nav-bar></ion-nav-bar>
<ion-nav-view class="slide-left-right">
  <ion-view title="我的页面">
    <ion-content>
      你好!
    </ion-content>
  </ion-view>
</ion-nav-view>

API

hide-nav-bar##布林值預設情況下，是否隱藏父
屬性#類型詳情
title
(可選)
#字串

顯示在父ionNavBar的標題。

hide-back-button
(可選)
##布林值 預設情況下，是否在父

ionNavBar隱藏後退按鈕。

(可選)
 ionNavBar

。

ion-nav-bar

#建立一個頂部工具列，當程式狀態改變時更新。

用法

<body ng-app="starter">
  <!-- 当我们浏览时，导航栏会随之更新。 -->
  <ion-nav-bar class="bar-positive nav-title-slide-ios7">
  </ion-nav-bar>

  <!-- 初始化时渲染视图模板 -->
  <ion-nav-view></ion-nav-view>
</body>

API

#屬性##詳情delegate-handle(可選)$ionicNavBarDelegatealign-title(可選)ion-nav-buttons
類型
字串		#該句柄以#標識此導覽列。

##字串
 #導覽列標題對齊的位置。可用： 'left', 'right', 'center'。 預設為 'center'。


隸屬於ionNavView

在ionView內的ionNavBar上用ionNavButtons設定按鈕。

你設定的任何按鈕都會被放置在導覽列的對應位置，當使用者離開父視圖時會被銷毀。

用法

<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
  <ion-view>
    <ion-nav-buttons side="left">
      <button class="button" ng-click="doSomething()">
        我是一个在导航栏左侧的按钮！
      </button>
    </ion-nav-buttons>
    <ion-content>
      这里是一些内容！
    </ion-content>
  </ion-view>
</ion-nav-view>

API

#屬性類型##詳情side字串
#在父ionNavBar#字串

#在父ionNavBar

中按鈕放置的位置。 可用: 'left' 或 'right'。
####

ion-nav-back-button

在一個ionNavBar中建立一個按鈕。

當使用者在目前導覽能夠後退時，將顯示後退按鈕。

用法

預設按鈕動作:

<ion-nav-bar>
  <ion-nav-back-button class="button-clear">
    <i class="ion-arrow-left-c"></i> 后退
  </ion-nav-back-button>
</ion-nav-bar>

自訂點擊動作，用$ionicNavBarDelegate:

<ion-nav-bar ng-controller="MyCtrl">
  <ion-nav-back-button class="button-clear"
    ng-click="canGoBack && goBack()">
    <i class="ion-arrow-left-c"></i> 后退
  </ion-nav-back-button>
</ion-nav-bar>
function MyCtrl($scope, $ionicNavBarDelegate) {
  $scope.goBack = function() {
    $ionicNavBarDelegate.back();
  };
}

在後退按鈕上顯示上一個標題，也用$ionicNavBarDelegate。 

<ion-nav-bar ng-controller="MyCtrl">
  <ion-nav-back-button class="button-icon">
    <i class="icon ion-arrow-left-c"></i>{{getPreviousTitle() || 'Back'}}
  </ion-nav-back-button>
</ion-nav-bar>
function MyCtrl($scope, $ionicNavBarDelegate) {
  $scope.getPreviousTitle = function() {
    return $ionicNavBarDelegate.getPreviousTitle();
  };
}

nav-clear

nav-clear一個當點擊視圖上的元素時用到的屬性指令，例如一個<a href> 或是一個<button ui- sref>。

當點擊時，nav-clear將會導致給定的元素，禁止下一個視圖的轉換。這個指令很有用，例如，側欄選單內的連結。

用法

下面是一個側邊欄選單內新增了nav-clear指令的一個連結。點擊該連結將停用視圖間的任何動畫。 

<a nav-clear menu-close href="#/home" class="item">首页</a>

ion-nav-title

ion-nav-title 用於設定 ion-view 範本中的標題。

用法

<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
  <ion-view>
    <ion-nav-title>
      <img src="logo.svg">
    </ion-nav-title>
    <ion-content>
      Some super content here!
    </ion-content>
  </ion-view>
</ion-nav-view>

nav-transition

設定使用的過渡類型，可以是：ios, android, 和 none。

用法

<a nav-transition="none" href="#/home">Home</a>

nav-direction

設定導覽視圖中過渡動畫的方向，可以是forward, back, enter, exit, swap。

用法

<a nav-direction="forward" href="#/home">Home</a>

$ionicNavBarDelegate

授權控制 ion-nav-bar  指令。

用法

<body ng-controller="MyCtrl">
  <ion-nav-bar>
    <button ng-click="setNavTitle('banana')">
      Set title to banana!
    </button>
  </ion-nav-bar>
</body>

function MyCtrl($scope, $ionicNavBarDelegate) {
  $scope.setNavTitle = function(title) {
    $ionicNavBarDelegate.title(title);
  }
}

方法

align([direction])

#在瀏覽歷史中後退。

參數類型詳情
event
(可選)
DOMEvent

#事件物件（如來自點擊事件）

align([direction])

帶有按鈕的標題對齊到指定的方向。

##direction
參數類型詳情
(可選)
字串#標題文字對齊的方向。可用: 'left', 'right', 'center'。 預設: 'center'。

傳回值: 布林值， 後退按鈕是否顯示。 

showBar(show)

設定或取得 ion-nav-bar 是否顯示。

參數類型詳情show
布林值導覽列是否顯示。

傳回值: 布林值， 導覽列是否顯示。 

showBackButton([show])

設定或取得 ion-nav-back-button  是否顯示。

參數類型詳情show
(可選)
布林值#是否顯示後退按鈕

################# #######
title(title)

為ion-nav-bar設定標題。

##title
參數類型詳情
字串顯示新標題。

$ionicHistory

$ionicHistory 用來追蹤使用者在 app 內的瀏覽記錄。

方法

viewHistory()

用於查看歷史記錄。 

currentView()

app 的目前視圖。 

currentHistoryId()
歷史堆疊的 ID，是目前視圖的父類別容器。 


currentTitle([val])

取得或設定目前檢視的標題。 

backView()

傳回上次瀏覽的視圖。 

backTitle()

取得上次瀏覽的檢視的標題。 

forwardView()

傳回歷史堆疊中目前視圖的上一個視圖。 

currentStateName()

傳回目前狀態名稱。 

goBack([backCount])

app 回退視圖，如果回退的視圖存在。

←
→