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" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="button button-icon icon ion-gear-a"></a>
            <h1 class="title">Header</h1>
            <a href="#/app/playlists" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="button button-icon icon ion-heart"></a>
        </div>
        <div class="bar bar-subheader">
            <h2 class="title">Sub Header</h2>
            <a href="#/app/playlists" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="button button-icon icon ion-ios7-undo-outline"></a>
            <a href="#/app/capture" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  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();
  };
}
           

版權聲明：本文為CSDN部落客「weixin_33895604」的原創文章，遵循CC 4.0 BY-SA版權協定，轉載請附上原文出處連結及本聲明。

原文連結：https://blog.csdn.net/weixin_33895604/article/details/92100346