仅为特定路线创建 ion-tab

Question

我有一个离子结构的侧边菜单 + 选项卡布局。

这是我的 app.js 代码

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

.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.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            // org.apache.cordova.statusbar required
            StatusBar.styleDefault();
        }
    });
})

.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('login', {
        url: "/login",
        templateUrl: "templates/login.html",
        controller: 'LoginCtrl'
    })
    .state('register', {
        url: "/register",
        templateUrl: "templates/register.html",
        controller: 'RegistrationCtrl'
    })

    .state('app', {
        url: "/app",
        abstract: true,
        templateUrl: "templates/menu.html",
        controller: 'AppCtrl'
    })

    .state('app.search', {
        url: "/search",
        views: {
            'tab-search': {
                templateUrl: "templates/search.html"
            }
        }
    })

    .state('app.browse', {
        url: "/browse",
        views: {
            'tab-browse': {
                templateUrl: "templates/browse.html"
            }
        }
    })

    .state('app.playlists', {
        url: "/playlists",
        views: {
            'tab-playlists': {
                templateUrl: "templates/playlists.html",
                controller: 'PlaylistsCtrl'
            }
        }
    })

    .state('app.single', {
        url: "/playlists/:playlistId",
        views: {
            'tab-playlists': {
                templateUrl: "templates/playlist.html",
                controller: 'PlaylistCtrl'
            }
        }
    })

    .state('app.about', {
        url: "/about",
        views: {
            'tab-about': {
                templateUrl: "templates/about.html",
                controller: 'AboutCtrl'
            }
        }
    });
    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/login');
});

var app = angular.module('starter.controllers', [])
.controller('AppCtrl', function ($scope, $ionicModal, $timeout, $state, $cordovaToast, $ionicPlatform,$ionicLoading) {
})

.controller('AboutCtrl', function ($scope) {
})

.controller('RegistrationCtrl', function ($scope, $ionicModal, $timeout, $state, $cordovaToast, $ionicPlatform,$ionicLoading) {
    console.log('Register');
})

.controller('PlaylistsCtrl', function ($scope) {
    $scope.playlists = [
        {
            title: 'Reggae',
            id: 1
        },
        {
            title: 'Chill',
            id: 2
        },
        {
            title: 'Dubstep',
            id: 3
        },
        {
            title: 'Indie',
            id: 4
        },
        {
            title: 'Rap',
            id: 5
        },
        {
            title: 'Cowbell',
            id: 6
        }
  ];
})

.controller('PlaylistCtrl', function ($scope, $stateParams) {});

这里是包含侧边菜单的 menu.html：

<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>
        <ion-nav-bar class="bar-assertive">
            <ion-nav-back-button>
            </ion-nav-back-button>

            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
                </button>
            </ion-nav-buttons>
        </ion-nav-bar>

        <!-- TABS -->
        <ion-tabs class="tabs-assertive">

            <ion-tab title="Search" icon-off="ion-search" icon-on="ion-search" href="#/app/search">
                <ion-nav-view name="tab-search"></ion-nav-view>
            </ion-tab>

            <ion-tab title="Browse" icon-off="ion-ios-glasses" icon-on="ion-ios-glasses" href="#/app/browse">
                <ion-nav-view name="tab-browse"></ion-nav-view>
            </ion-tab>

            <ion-tab title="Playlist" icon-off="ion-ipod" icon-on="ion-ipod" href="#/app/playlists">
                <ion-nav-view name="tab-playlists"></ion-nav-view>
            </ion-tab>

        </ion-tabs>
    </ion-side-menu-content>

    <!-- Side Menu (left) -->
    <ion-side-menu side="left">
        <ion-content class="sideMenuImg">
            <div class="profileDisplay">
                <a menu-close href="#/app/profile">
                    <img class="profileImage" src="img/profilePicture.jpg" />
                </a>
            </div>
            <ion-list>
                <ion-item class="" menu-close href="#/app/search">
                    <i class='icon ion-home'></i> Dashboard
                </ion-item>
                <ion-item class="" menu-close href="#/app/browse">
                    <i class='icon ion-calendar'></i> Events
                </ion-item>
                <ion-item class="" menu-close href="#/app/about">
                    <i class='icon ion-information-circled'></i> About Us
                </ion-item>
                <ion-item class="" menu-close href="#/app/playlists">
                    <i class='icon ion-email'></i> Contact Us
                </ion-item>
                <ion-item class="" menu-close href="#/login">
                    <i class='icon ion-log-out'></i> Logout
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

这里我希望关于我们页面不应该有标签布局，并且应该只加载关于主视图。

如何实现这一点，即离子侧菜单内容中的选项卡仅适用于特定侧菜单项而不适用于所有侧菜单？

请帮忙。

Answer 1

要实现这一点，About Us 路由状态不能是 app 状态的子状态。

所以尝试只更改州名：

.state('about', {
    url: "/about",
    views: {
        'tab-about': {
            templateUrl: "templates/about.html",
            controller: 'AboutCtrl'
        }
    }
});