2015-08-25 50 views
0

我目前工作的一个应用程序与离子框架和我碰到下面的问题就来了:离子侧面菜单 - 只有一个页面

在应用程序的每个页面应该有可用的左侧菜单。在只有一个页面('活动')中,右侧应该有另一个侧面菜单。 现在一切正常,直到我访问了“events”页面一次:从那一刻起,每个页面向左滑动时都会显示一个空的右侧菜单 - 当然,这不应该在那里。

由于我不确定我是否足够好地解释了这种行为,所以我为您制作了一个快速代码文件,以便查看应用程序和我的完整code

谢谢!


这里有重要的代码片段:

的index.html:

<body ng-controller="MainCtrl" ng-app="ionicApp"> 

    <ion-side-menus> 
    <!--- NAV-MENU LEFT ---> 
    <ion-side-menu side="left">[...]</ion-side-menu> 

    <!--- EVENTS-MENU RIGHT ---> 
    <ion-side-menu side="right" ng-if="showRightMenu">[...]</ion-side-menu> 

    <ion-side-menu-content> 

     <!--- HEADER ---> 
     <ion-nav-bar class="bar bar-header bar-positive"> 
     <ion-nav-buttons side="left"> 
      <button class="button button-clear icon ion-navicon" menu-toggle="left"></button> 
     </ion-nav-buttons> 
     <ion-nav-buttons side="right"> 
      <button class="button button-clear icon ion-gear-a" ng-if="showRightMenu" menu-toggle="right"></button> 
     </ion-nav-buttons> 
     </ion-nav-bar> 

     <ion-nav-view></ion-nav-view> 
    </ion-side-menu-content> 

    </ion-side-menus> 

    <script id="home.html" type="text/ng-template">[...]</script> 
    <script id="events.html" type="text/ng-template">[...]</script> 

</body> 

app.js:

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

app.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
    .state('home', { 
     url: '/', 
     templateUrl: 'home.html' 
    }) 
    .state('events', { 
     url: '/events', 
     templateUrl: 'events.html' 
    }); 
    $urlRouterProvider.otherwise('/'); 
}); 

[...] 

app.controller('MainCtrl', function($scope, $state, $rootScope) { 
    [...] 

    //set ng-if-variable for the right side menu 
    $rootScope.$on('$stateChangeSuccess', 
    function(event, toState, toParams, fromState, fromParams) { 
     if (toState.name == 'events') { 
     $scope.showRightMenu = true; 
     } else { 
     $scope.showRightMenu = false; 
     } 

     //console.log($scope.showRightMenu); 
    }) 

    function ContentController($scope, $ionicSideMenuDelegate) { 
    $scope.toggleLeft = function() { 
     $ionicSideMenuDelegate.toggleLeft(); 
    }; 
    $scope.toggleRight = function() { 
     $ionicSideMenuDelegate.toggleLeft(); 
    }; 
    } 
}); 

[...] 

回答

0

在mainCtrl你必须把一些条件如wh你不想显示左边的菜单。

在下面行的代码给NG隐藏=“”,使这个变量从mainCtrl

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

是的,我知道(这就是我用ng-if所做的),但我不想让左边的按钮消失,但当向左滑动时,所有页面上的“空白”右侧菜单... – Nina

+0

好吧,所以当我们隐藏左侧菜单,我们必须禁用刷卡也? –

+0

我想禁用右侧的菜单,但是,确切地说。即使在右边的离子菜单上设置了ng-if = false,仍然可以将其打开。内容虽然消失了。 – Nina

0

好真的还是假的,所以以后更多的研究,我偶然发现了$ ionicSideMenuDelegate这显然也可以只修改其中一个侧面菜单的设置。我不知道这一点,所以我想分享我的其他人谁的解决方案可能会遇到类似的问题:

$rootScope.$on('$stateChangeSuccess', 
    function(event, toState, toParams, fromState, fromParams){ 
     if (toState.name == 'events'){ 
      $scope.showRightMenu = true; 
      $ionicSideMenuDelegate._instances[0].right.isEnabled = true; 
     } 
     else { 
      $scope.showRightMenu = false; 
      $ionicSideMenuDelegate._instances[0].right.isEnabled = false; 
     } 
    }) 
+0

你在代码中放置了这个吗? – rcat24

+0

我把它放在主App-Controller中 – Nina

2

我碰到了同样的问题来到

<ion-side-menu is-enabled="showRightMenu" side="right"></ion-side-menu> 

查看文档,这是我找到解决这个问题的最好办法。

首先,我的菜单有两个模板,一个是标准菜单,另一个是右侧菜单。

标准(左只):

<ion-side-menus enable-menu-with-back-views="false" class="dark"> 
    <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> 
    </ion-side-menu-content> 

    <ion-side-menu side="left"> 
    <ion-content> 
    </ion-content> 
    </ion-side-menu> 

</ion-side-menus> 

右键菜单:

<ion-side-menus enable-menu-with-back-views="false" class="dark"> 
    <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-buttons side="right"> 
     <button class="button button-icon button-clear ion-navicon" menu-toggle="right"> 
     </button> 
     </ion-nav-buttons> 
    </ion-nav-bar> 
    <ion-nav-view name="menuContent"></ion-nav-view> 
    </ion-side-menu-content> 

    <ion-side-menu side="left"> 
    </ion-side-menu> 

    <ion-side-menu side="right"> 
    </ion-side-menu> 
</ion-side-menus> 

的魔力,其余情况与你的路由设置,定义每个菜单一个抽象的路线,然后再申请根据需要你的路线:

$stateProvider 
    .state('app', { 
     url: '/app', 
     abstract: true, 
     templateUrl: 'templates/menu.html', 
     controller: 'AppCtrl', 
    }) 
    .state('app-right', { 
     url: '/app', 
     abstract: true, 
     templateUrl: 'templates/rightMenu.html', 
     controller: 'AppCtrl', 
    }) 
    .state('app-right.settings', { 
     url: '/settings', 
     views: { 
     'menuContent': { 
      templateUrl: 'templates/settings.html' 
     } 
     } 
    }) 
    .state('app.about', { 
     url: '/about', 
     views: { 
     'menuContent': { 
      templateUrl: 'templates/about.html' 
     } 
     } 
    })