Создать ионную вкладку только для определенных маршрутов

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> 

Здесь я хочу, что О нас страница не должна иметь расположение вкладок и должен быть загружен только основной вид About.

Как я могу достичь этих вкладок i.e в содержимом меню с ионным боком только для определенного элемента бокового меню, а не для всех боковых меню?

Пожалуйста, помогите.

Answer 1

Для этого состояние About Us не может быть дочерним по отношению к состоянию app.

Так попробуйте изменить только название государства:

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