ionic中的返回按鈕--$ionicHistory

ionic項目中的返回按鈕解決方案

ionic框架對Android返回鍵的處理

這篇文章下面的幾篇文章也很好要看看。

這下面是以前寫的一些東西

ionic之AngularJS擴展 移動開發（視圖導航一）

後臺我看了他的博客的方法http://www.haomou.net/2014/08/11/2014_ionic_api/

http://www.haomou.net/2014/08/09/2014_ionic_api_css/

等於主要有兩種方法實現返回按鈕，其實用header標籤和ion-nav-bar兩種方法是差很少的，可是ion-nav-bar帶有導航特性。其實還能夠嘗試

$ionicHistory

寫法不少，若是之後要編譯爲android和ios最好都用ion的指令，兼容性好

官網上還說最好把ion-nav-bar放到每一個頁面中，這樣每一個頁面都有導航屬性了

一種用樣式，定義header和footer

<ion-view>
    <ion-content class="no-header">
        <div class="bar bar-header  bar-royal">
            <a href="#/app/capture" class="button button-icon icon ion-gear-a"></a>
            <h1 class="title">Header</h1>
            <a href="#/app/playlists" class="button button-icon icon ion-heart"></a>
        </div>
        <div class="bar bar-subheader">
            <h2 class="title">Sub Header</h2>
            <a href="#/app/playlists" class="button button-icon icon ion-ios7-undo-outline"></a>
            <a href="#/app/capture" class="button button-icon icon ion-ios7-redo-outline"></a>
        </div>
    </ion-content>
</ion-view>

還有一種寫法  header標籤

<header class="bar bar-header bar-positive">
          <h1 class="title">Deadlines</h1>
        </header>
        <ion-content has-header="true">
          <h1>Deadlines</h1>
        </ion-content>

這是官網指令的寫法

<ion-header-bar align-title="left" class="bar-positive">   <div class="buttons">     <button class="button" ng-click="doSomething()">Left Button</button>   </div>   <h1 class="title">Title!</h1>   <div class="buttons">     <button class="button">Right Button</button>   </div> </ion-header-bar> <ion-content>   Some content! </ion-content>

另外一種是用指令   ion-nav-bar和ion-nav-buttons

導航欄中的按鈕在ion-view中定義

這點注意

<>
</>

要放在父類視圖中，不然放在一個頁面中會不顯示東西

<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
  <ion-view>
    <ion-nav-buttons side="left">
      <button class="button" ng-click="doSomething()">
        I'm a button on the left of the navbar!
      </button>
    </ion-nav-buttons>
    <ion-content>
      Some super content here!
    </ion-content>
  </ion-view>
</ion-nav-view>

還能夠用ion-nav-back-button 默認的方法

默認執行返回：

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

用戶本身定製動做, 使用 $ionicNavBarDelegate:

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

顯示返回的view的標題, 使用 $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();
  };
}