重定向后不显示标题中的离子后退按钮

时间:2014-09-14 09:33:27

标签: navigation ionic-framework

我在应用中显示后退按钮时遇到问题。

我使用以下方法重定向到新页面:

<button class="button button-full button-positive" ui-sref="tab.dash" >
            Full Width Block Button
        </button>

第二页上的重定向后,标题中没有后退箭头图标显示。

以下是index.html中的内容正文标记

<body ng-app="starter" animation="slide-left-right-ios7">
    <!-- 
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-positive nav-title-slide-ios7">
      <ion-nav-back-button class="button-icon icon  ion-ios7-arrow-back">
        Back
      </ion-nav-back-button>
    </ion-nav-bar>
    <!-- 
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view>

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

即时重定向的第二个模板的内容。

<ion-view title="Charts - days">
  <ion-content class="padding">
    <h1>test</h1>
      <div class="row" on-touch="alert('right');">
          <div class="col" on-touch="alert('right');" style="background-color: red;">.col</div>
      </div>
      <button on-touch="alert('touch');" class="button">Test</button>

  </ion-content>
</ion-view>

有人可以告诉我我做错了吗?

1 个答案:

答案 0 :(得分:1)

你可以用两种方式做到...... 1-转到您的App.js文件并添加类似 -

的状态
   .state('app.playlists', {
      url: '/playlists',
      views: {
        'menuContent': {
          templateUrl: 'templates/playlists.html',
          controller: 'PlaylistsCtrl'
        }
      }
    })

现在,如果您想自动添加新状态和后退按钮,则

.state('app.single', {
    url: '/playlists/1',
    views: {
      'menuContent': {
        templateUrl: 'templates/playlist.html',
        controller: 'PlaylistCtrl'
      }
    }
  });

在这种情况下,你不需要在menu.html中编写代码来设置后退按钮检查这是否可用?

  <ion-nav-back-button>
  </ion-nav-back-button>

这将自动维护历史记录堆栈,建议这样做。

2 - 第二种方式是编写手册代码 - $ ionicHistory,$ scope - 将此注入您的Controller,然后添加此

$scope.GoBack = function () {
        $ionicHistory.goBack();
    }

现在在您的HTML页面中,在启动ion-content

之后写下这个
<ion-content>

        <div class="bar bar-header bar-calm">
            <button class="button ion-chevron-left" ng-click="GoBack()"></button>
            <h6 class="title">Security Settings</h6>
        </div>
 </ion-content>