仅为特定路线创建离子选项卡

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'
        }
    }
});