离子 - 兼顾sidemenu和标签

我需要在我的Ionic应用程序项目的同一屏幕上实现sidemenu和标签。离子 - 兼顾sidemenu和标签

它正在工作（差不多）。我希望我的底部选项卡始终可见，但我也希望能够从侧边菜单导航到其他（然后选项卡）视图。它应该保持所有选项卡菜单可见，但所有项目都处于非活动状态。

我的状态定义：

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) { 
    $stateProvider 

    .state('app', { 
    url: '/app', 
    abstract: true, 
    templateUrl: 'templates/base.html' 
    }) 

    .state('app.locations', { // this view doesn't work, when I navigate to it, it changes view title only. 
    url: '/locations', 
    views: { 
     'menuContent': { 
     templateUrl: 'templates/views/locations.html', 
     controller: 'LocationsCtrl' 
     } 
    } 
    }) 

    .state('app.home', { 
    url: '/home', 
    views: { 
     'tab-home': { 
     templateUrl: 'templates/tabs/home.html', 
     controller: 'HomeCtrl' 
     } 
    } 
    }) 

    .state('app.history', { 
     url: '/history', 
     views: { 
     'tab-history': { 
      templateUrl: 'templates/tabs/history.html', 
      controller: 'HistoryCtrl' 
     } 
     } 
    }) 

    .state('app.messages', { 
    url: '/messages', 
    views: { 
     'tab-messages': { 
     templateUrl: 'templates/tabs/messages.html', 
     controller: 'MessagesCtrl' 
     } 
    } 
    }); 

    $urlRouterProvider.otherwise('/app/home'); 

});

我base.html文件模板：

<ion-side-menus enable-menu-with-back-views="false"> 
    <ion-side-menu-content> 
    <ion-nav-bar class="bar-stable"> 
     <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> 
    <ion-nav-view name="menuContent"></ion-nav-view> <!-- IS IT OK?? --> 

    <ion-tabs class="tabs-icon-top tabs-color-active-positive"> 

     <ion-tab title="Home" icon-off="ion-ios-home" icon-on="ion-ios-home" ui-sref="app.home"> 
     <ion-nav-view name="tab-home"></ion-nav-view> 
     </ion-tab> 

     <ion-tab title="History" icon-off="ion-ios-clock-outline" icon-on="ion-ios-clock-outline" ui-sref="app.history"> 
     <ion-nav-view name="tab-history"></ion-nav-view> 
     </ion-tab> 

     <ion-tab title="Messages" icon-off="ion-ios-email-outline" icon-on="ion-ios-email-outline" ui-sref="app.messages" badge="2" badge-style="badge-assertive"> 
     <ion-nav-view name="tab-messages"></ion-nav-view> 
     </ion-tab> 

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

    <ion-side-menu side="left"> 
    <ion-header-bar class="bar-stable"> 
     <h1 class="title">Left</h1> 
    </ion-header-bar> 
    <ion-content> 
     <ion-list> 
     <ion-item class="item item-divider">Location: B17726</ion-item> 
     <ion-item menu-close href="#/app/locations"> 
      Login 
     </ion-item> 
     <ion-item menu-close> 
      Search 
     </ion-item> 
     <ion-item menu-close> 
      Browse 
     </ion-item> 
     <ion-item menu-close> 
      Playlists 
     </ion-item> 
     <ion-item class="item item-divider"> 
      General 
     </ion-item> 
     </ion-list> 
    </ion-content> 
    </ion-side-menu> 
</ion-side-menus>

基本上，我想有底部的标签总是可见，事件没有它的项目是活跃。点击其中一个标签时，我想将其显示为正常。

来源

2016-07-25 dease

如果可以的话，我会发表评论（没有代表的困扰），但如果这样可以帮助你，或者给你一个灵感，那么这里是我目前正在往下看的曲目。我也试图弄清楚这一点。

下面是对离子论坛类似的问题：http://forum.ionicframework.com/t/show-tab-bar-on-pages-not-children-of-the-tab-bar/726

的最后注释提到一个名为$ ionicTabsDelegate一个叫表演酒吧（显示）方法角方法，它需要就是否显示标签栏的布尔。

编号：http://ionicframework.com/docs/api/service/%24ionicTabsDelegate/

下面是我目前所产生的代码，但似乎工作不（希望已经很接近了）？

的index.html

<ion-content class="side-menu-left" ng-controller="AppCtrl"> 
    <ion-list <!--Irrelevant Stuff Here-->> 
    <ion-item ui-sref="aboutUs" <!--Irrelevant Stuff Here--> ng-click="showTabs()" menu-close> 
     <i class="icon ion-information-circled"></i>About Us</ion-item> 

    <!-- More Menu Items Here etc. -->

controllers.js

.controller('AppCtrl', function($scope, $ionicTabsDelegate) { 

    $scope.showTabs = function() { 
     $ionicTabsDelegate.showBar(true); 
    }; 
});

编辑：这里是什么似乎沿着这个主题的另一个离子论坛上发帖是一个工作Codepen例。

forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311
codepen.io/gnomeontherun/pen/tbvdH

来源

2016-08-17 13:42:29

离子 - 兼顾sidemenu和标签

回答

相关问题