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