Question

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

我在做什么：我在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模板但没有按下任何内容后退按钮

Answer 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>

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

1 个答案: