Как принудительно нажать кнопку возврата звука на определенной странице?

При переходе с одной страницы на другую Ionic автоматически отображает кнопку возврата на панели навигации. Однако есть определенные случаи, когда ионный сигнал не отображает кнопку "Назад". Например, при переходе с вкладки на вкладку "Нет".

Как заставить Ionic отображать кнопку возврата на определенной странице?

JavaScript:

.state('app.tab.playlists', { //<!-- Tab content page
  url: '/playlists',
  views: {
    'tab-Content': {
      templateUrl: 'templates/playlists.html',
      controller: 'PlaylistsCtrl'
    }
  }
})

.state('app.singer', { //<!-- Not tab content page (if you navigate from tab page to this page, back button will not displayed)
  url: '/singer',
  views: {
    'menuContent': {
      templateUrl: 'templates/singer.html'
    }
  }
})

Ответы

Ответ 1

Вы можете сказать это в своем контроллере. Попробуйте:

 .controller('yourCtrl', function($scope) {

$scope.$on('$ionicView.beforeEnter', function (event, viewData) {
  viewData.enableBack = true;
}); 

})

Но, как сказал LeftyX. Функция истории для отображения вкладки в не-вкладке является ошибкой.

Ответ 2

Ionic управляет history, пока вы переходите с одного взгляда на другой.

$ionicHistory отслеживает представления, когда пользователь переходит через приложение. Подобно тому, как ведет себя браузер, приложение Ionic может отслеживать предыдущее представление, текущий вид и вперед (если есть). Однако обычный веб-браузер поддерживает только отслеживать один стек истории линейным способом.

В отличие от традиционной среды браузера приложения и веб-приложения параллельные независимые истории, например, с вкладками. Если пользователь переместите несколько страниц на одну вкладку, а затем переключитесь на новую вкладку и назад, кнопка назад относится не к предыдущей вкладке, а к предыдущих страниц, посещенных на этой вкладке.

Там обнаружена ошибка на github, которая еще не исправлена ​​(и будет исправлена ​​только в версии 2.0), где Адам Брэдли заявляет:

Кнопка "Назад" не отображается, потому что когда вы переходите на вкладку, она введите его собственную "историю", то есть каждая вкладка имеет свою собственную навигацию назад и вперед.

Итак, в основном, когда вы переходите с табуляции на обычный просмотр, вы потеряете кнопку "Назад".

Что вы можете сделать, так это создать его самостоятельно:

<ion-nav-buttons side="left">
    <button class="button back-button buttons button-clear header-item" ng-click="goBack()">
        <i class="icon ion-ios-arrow-back"> Back</i> 
    </button>
</ion-nav-buttons>

и поместите его в свой вид:

<ion-view view-title="home">

  <ion-nav-buttons side="left">
    <button class="button back-button buttons button-clear header-item" ng-click="goBack()">
      <i class="icon ion-ios-arrow-back"> Back</i> 
    </button>
  </ion-nav-buttons>

    <ion-content padding='true' scroll='false' has-footer='false'>

        <div class="card">
            <div class="item item-text-wrap">
                HOME PAGE
            </div>
        </div>

    </ion-content>

</ion-view>

Как вы можете видеть, я использовал кнопку ng-click="goBack()" для кнопки.

В вашем контроллере вы просто:

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

не забудьте ввести $ionicHistory в ваш контроллер.

PS: Это чрезмерно упрощенное решение, поскольку оно не проверяет, имеет ли история обратную сторону:

$ionicHistory.viewHistory().backView

Ответ 3

Добавьте следующие строки в

<ion-navbar hideBackButton="true">
    <button (click)="back()" class="back-button disable-hover bar-button bar-button-ios back-button-ios bar-button-default bar-button-default-ios show-back-button" ion-button="bar-button" ng-reflect-klass="back-button" ng-reflect-ng-class="back-button-ios" style=""><span class="button-inner"><ion-icon class="back-button-icon icon icon-ios back-button-icon-ios ion-ios-arrow-back" role="img" ng-reflect-klass="back-button-icon" ng-reflect-ng-class="back-button-icon-ios" aria-label="arrow back" ng-reflect-name="ios-arrow-back"></ion-icon><span class="back-button-text back-button-text-ios" ng-reflect-klass="back-button-text" ng-reflect-ng-class="back-button-text-ios">Back</span></span><div class="button-effect"></div></button>