離子：標籤視圖不顯示返回按鈕

Question

我有一個簡單的基於標籤的離子應用程序。在應用程序輸入實際的製表符模板之前，我有一個登錄名。在輸入製表符視圖之前，用戶可以使用導航欄上的後退按鈕在視圖之間導航，這在導入新視圖時會自動生成。

但是，進入選項卡後，這不起作用。我希望選項卡有多個視圖，並且框架應該管理導航欄，因爲它具有導航歷史並知道用戶來自哪裏。我已經通過互聯網瞭解了這一點，但我找不到和示例。

這是應該要回去的能力的標籤的代碼，一旦進入了「邀請」的觀點：

製表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狀態的兄弟，但它應該是tab.home的孩子，用於ion-nav-bar指令，以自動生成後退按鈕並處理歷史記錄。您還需要在指定的標籤tab-home內呈現invite視圖。改變你的狀態配置如下，你的預期行爲應該工作：

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