Ionic: вкладка не показывает кнопку «Назад»

У меня есть простое приложение Ionic на основе вкладок. У меня есть логин до того, как приложение войдет в фактический шаблон вкладки. Перед входом в представление вкладки пользователь может перемещаться между представлениями с помощью кнопок «Назад» на панели навигации, которые генерируются автоматически при переходе к новому представлению.

Однако это не работает после входа на вкладку. Я хочу, чтобы вкладки имели несколько представлений, а инфраструктура должна управлять панелью навигации, поскольку она имеет историю навигации и знает, откуда пришел пользователь. Я читал об этом во всем Интернете, но я не мог найти и пример.

Вот код вкладки, которая должна иметь возможность вернуться после входа в режим «пригласить»:

tab-home.html

    <ion-view view-title="Angelsportverein Test e.V.">
  <ion-header-bar class="bar-positive bar-subheader">
    <h1 class="title">Mitglieder</h1>
    <div class="buttons">
      <!-- the register function navigates to the invite view -->
      <button class="button icon icon-right" ng-click="invite()">
        Einladen
      </button>
    </div>
  </ion-header-bar>
  <ion-content class="has-subheader">
    <ion-list>
      <ion-item ng-repeat="item in items">
        Item {{ item.id }}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

вкладка домашний контроллер:

.controller('HomeCtrl', function($scope, $state) {
  $scope.invite = function() {
    console.log('Invite');
    $state.go('invite');
  };
})

app.js (Обратите внимание, что навигация между регистрацией, логином и забытым паролем работает отлично, как и должно быть)

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider
    //login states
    .state('signin', {
      url: '/sign-in',
      templateUrl: 'templates/sign-in.html',
      controller: 'SignInCtrl'
    })
    .state('forgotpassword', {
      url: '/forgot-password',
      templateUrl: 'templates/forgot-password.html'
    })
    .state('register', {
      url: '/register',
      templateUrl: 'templates/register.html',
      controller: 'RegisterCtrl'
    })

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })

  // Each tab has its own nav history stack:
  .state('tab.home', {
    url: '/home',
    views: {
      'tab-home': {
        templateUrl: 'templates/tab-home.html',
        controller: 'HomeCtrl'
      }
    }
  })
    .state('invite', {
      url: '/invite',
      templateUrl: 'templates/invite.html',
      controller: 'InviteCtrl'
    })
  .state('tab.kalender', {
      url: '/kalender',
      views: {
        'tab-kalender': {
          templateUrl: 'templates/tab-kalender.html',
          controller: 'KalenderCtrl'
        }
      }
    })
    .state('tab.chat-detail', {
      url: '/kalender/:chatId',
      views: {
        'tab-chats': {
          templateUrl: 'templates/chat-detail.html',
          controller: 'ChatDetailCtrl'
        }
      }
    })


  .state('tab.fangbuch', {
    url: '/fangbuch',
    views: {
      'tab-fangbuch': {
        templateUrl: 'templates/tab-fangbuch.html',
        controller: 'FangbuchCtrl'
      }
    }
  });

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

});

вкладки.html

<!--
Create tabs with an icon and label, using the tabs-positive style.
Each tab's child <ion-nav-view> directive will have its own
navigation history that also transitions its views in and out.
-->
<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <!-- Dashboard Tab -->
  <ion-tab title="Home" icon-off="ion-home" icon-on="ion-home" href="#/tab/home">
    <ion-nav-view name="tab-home"></ion-nav-view>
  </ion-tab>

  <!-- Kalender Tab -->
  <ion-tab title="Kalender" icon-off="ion-calendar" icon-on="ion-calendar" href="#/tab/kalender">
    <ion-nav-view name="tab-kalender"></ion-nav-view>
  </ion-tab>

  <!-- Fangbuch Tab -->
  <ion-tab title="Fangbuch" icon-off="ion-folder" icon-on="ion-folder" href="#/tab/fangbuch">
    <ion-nav-view name="tab-fangbuch"></ion-nav-view>
  </ion-tab>


</ion-tabs>

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>
  <body ng-app="starter">
    <!--
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </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>
</html>

person Tobias Kuess    schedule 16.04.2016    source источник


Ответы (1)


Это не работает, потому что конфигурация состояния для вашего состояния invite неверна. Вы указали, что invite является одноуровневым состоянием tab, но оно должно быть дочерним по отношению к tab.home, чтобы директива ion-nav-bar автоматически генерировала кнопку «Назад» и обрабатывала историю. Также вам необходимо отобразить представление invite на названной вкладке tab-home. Измените конфигурацию своего состояния, как показано ниже, и ожидаемое поведение должно работать:

.state('tab.invite', {
  url: '/invite',
  views: {
    'tab-home': {
      templateUrl: 'templates/invite.html',
      controller: 'InviteCtrl'
    }
  }
})
person Aditya Singh    schedule 16.04.2016
comment
Работает! Теперь я понимаю, как работает вся система, большое спасибо! Еще одна вещь: рядом со значком стрелки всегда есть название предыдущего вида на панели навигации. Теперь отображается только «Назад», можно ли это как-то изменить? - person Tobias Kuess; 17.04.2016
comment
Вы хотите удалить имя? В этом случае вы можете использовать приведенный ниже метод для своего app.config метода: $ionicConfigProvider.backButton.previousTitleText(false); $ionicConfigProvider.backButton.text(' '); Кроме того, примите ответ и (или) проголосуйте, если ваша проблема была решена :) - person Aditya Singh; 17.04.2016
comment
Тогда это должно сработать. Добавьте вызов метода $ionicConfigProvider.backButton.previousTitleText(true) в свой app.config - person Aditya Singh; 17.04.2016
comment
Нет, это уже работает, моя ошибка заключалась в том, что имя предыдущего представления было слишком длинным. Я перенесу это в простой текст под панелью навигации и заменю на «Дом». Большое спасибо!! - person Tobias Kuess; 17.04.2016