ionic-framework - ionic 框架隐藏特定页面上的选项卡

Question

我正在使用 ionic 框架，并且创建了一个新的选项卡应用程序。

我需要做的是将一个页面作为默认页面或主页，但没有选项卡，然后所有其他页面正常使用选项卡。

就像一个登陆页面。

我怎样才能做到这一点？

Answer 1

Plunker Demo

首先定义一个单独的$stateProvider用于登陆或默认页面 [我想你已经定义了 $stateProvider其他页面] in app.js . app.js 文件应该是这样的

app.js

var app = angular.module('myApp', ['ionic']);

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('tabs', {
      url: '/tab',
      controller: 'TabsCtrl',
      templateUrl: 'tabs.html'
    })
    .state('tabs.home', {
      url: '/home',
      views: {
        'home-tab': {
           controller: 'homeCtrl',
          templateUrl: 'home.html'
        }
      }
    })  
    .state('tabs.settings', {
      url: '/settings',
      views: {
        'settings-tab': {
           controller: ' signOutCtrl',
          templateUrl: 'settings.html'
        }
      }
    });
     $stateProvider
        .state('landing', {
            url: '/landing',
            controller: 'landingCtrl',
            templateUrl: 'landing.html'
    });

  $urlRouterProvider.otherwise('/landing');
});

还要为选项卡创建一个 html 页面。

tabs.html

<ion-view title="Home">
    <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
    </ion-nav-buttons>
    <ion-tabs class="tabs-icon-top tabs-positive">
        <ion-tab title="{{tab1Title}}" icon="ion-home" href="#/tab/home">
            <ion-nav-view name="home-tab"></ion-nav-view>
        </ion-tab>
        <ion-tab title="{{tab2Title}}" icon="ion-gear-a" href="#/tab/settings">
            <ion-nav-view name="settings-tab"></ion-nav-view>
        </ion-tab>
        <ion-tab title="{{tab3Title}}" href="#/landing" icon="ion-log-out">
        </ion-tab>
    </ion-tabs>
</ion-view>

您还需要隐藏 <ion-nav-bar>在您的 landing 页面使用 hide-nav-bar="true " .

登陆.html

<ion-view hide-nav-bar="true ">
    <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
    </ion-nav-buttons>
    <ion-content padding="true">
        <h1 style="text-align: center;">Welcome To Landing Page</h1>
        <a class="button icon-right ion-chevron-right button-calm" ng-click="open()">Lets Go</a>
    </ion-content>
</ion-view>