Ionic：タブビューに戻るボタンが表示されない

Question

私は簡単なTabベースのIonic-appを持っています。私はアプリが実際のタブテンプレートを入力する前にログインしている。タブビューに入る前に、ユーザーは、新しいビューを表示するときに自動的に生成される、ナビゲーションバーの戻るボタンを使用してビュー間をナビゲートすることができます。

ただし、タブを入力しても機能しません。私はタブに複数のビューを持ち、フレームワークはナビゲーション履歴を持ち、ユーザがどこから来たのかを知っているので、ナビゲーションバーを管理する必要があります。私はインターネット上でこれをすべて読んだことがありますが、私は見つけることができませんでした。

タブ-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'); 

}); 

tabs.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> 

Answer 1

ごinvite状態のための状態構成が正しくないため、これは動作しません。 inviteをtab州の兄弟に指定しましたが、ion-nav-barディレクティブが自動的に戻るボタンを生成して履歴を処理するには、tab.homeの子である必要があります。また、名前付きタブ内のinviteビューをレンダリングする必要があります。tab-home。状態の設定を次のように変更して、正常に動作するはずです。

.state('tab.invite', { 
    url: '/invite', 
    views: { 
    'tab-home': { 
     templateUrl: 'templates/invite.html', 
     controller: 'InviteCtrl' 
    } 
    } 
})