离子后退按钮不显示最后一个视图

Posted 2023-02-24

【中文标题】离子后退按钮不显示最后一个视图

【英文标题】：ionic back button not showing last view

【发布时间】：2016-02-01 10:31:11

【问题描述】：

我正在尝试在我的 ionic 应用上应用后退按钮概念。

这是我在做什么： 我在index.html 文件中创建了我的应用程序，加载了所有必要的依赖项。

  <ion-nav-bar class="bar-light nav-title-slide-ios7">
      <ion-nav-back-button class="button-clear button-icon">
        <i class="ion-arrow-left-c"></i>
      </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>

我创建了一个名为dashboard.html的视图

<ion-view class="bar-light" view-title="Dashboard">
<ion-content scroll="false" class="padding grid-collection has-header">
    <div class="grid-full">
        <div class="grid-child">Play Ground</div>
    </div>
</ion-content>      

<div class="bar bar-footer">
    <a ui-sref="dashboard.create"><button class="button button-positive footer-button">Left</button></a>
    <button class="button button-positive footer-button pull-right">Right</button>
</div>
</ion-view>
<ion-nav-view></ion-nav-view>

在这里我应用了一个名为 Left 的按钮，单击它时应该会打开一个新视图，并在其左上角有一个后退按钮，直到这里都可以正常工作。create-new.html

<ion-view view-title="child">
  <ion-content class="padding">
        <h1>Hellow</h1>
            <h2>World</h2>
               <h3>I am here !</h3>
    </p>
  </ion-content>
</ion-view>

当我单击返回按钮时，我的状态正在改变，但模板 create-new.html 保持打开状态，它不会隐藏和打开最后一个 dashboard.html

这里我是如何配置状态的。

$stateProvider

  // setup an abstract state for the tabs directive
    .state('home', 
      url: '/home',
      templateUrl: 'templates/home.html',
     controller:'authenticateCtrl'
     )
    .state('home.nativelogin', 
      url: '/nativelogin',
      templateUrl: 'templates/login.html',
      controller:'authenticateCtrl'

    )
    .state('dashboard', 
      url: '/dashboard',
      templateUrl:'templates/dashboard.html',
      controller:'dashboardCtrl',
    )
    .state('dashboard.create',
      url:'/create',
      templateUrl:'templates/create-new.html',
      controller:'dashboardCtrl'
    );

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('home');

**编辑：* 我刚刚检查了有两个 div 类 'active' 和 'cached' 他们想交换他们的类以使后退按钮工作正常但它交换一次以打开 create-new 模板但按下后退按钮没有任何内容

【参考方案1】：

注意正确的语法：从dashboard.html中删除标签<ion-nav-view></ion-nav-view>，最好使用<ion-footer-bar>而不是<div class="bar bar-footer">：

<ion-view class="bar-light" view-title="Dashboard">
<ion-content scroll="false" class="padding grid-collection has-header">
    <div class="grid-full">
        <div class="grid-child">Play Ground</div>
    </div>
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive">
  <div class="buttons">
    <a ui-sref="dashboard.create" class="button button-positive footer-button">Left</a>
  </div>
  <div class="buttons" ng-click="doSomething()">
    <button class="button">Right</button>
  </div>
</ion-footer-bar> 
</ion-view>