Ionic Side Menu - только на одной странице

0

В настоящее время я работаю над приложением с Ionic Framework, и я столкнулся со следующей проблемой:

На каждой странице приложения должно быть доступно меню слева. На одной странице ("события") справа должно быть другое боковое меню. Теперь все работает нормально, пока я не посетил "события" -page один раз: с этой точки на каждой странице открывается пустое правое меню при прохождении влево - чего, конечно, не должно быть.

Поскольку я не уверен, что достаточно хорошо объяснил поведение, я сделал быстрый код, чтобы вы могли посмотреть приложение и полный код.

Спасибо!

Здесь у вас есть важные фрагменты кода:

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

[...]
Теги:
ionic-framework
ionic

4 ответа

2

Я столкнулся с одной и той же проблемой, это лучший способ найти решение.

Во-первых, у меня было два шаблона для моего меню, один стандарт и один - правое меню.

Стандартный (только слева):

<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'
        }
      }
    })
Поделиться
0

Вы должны использовать атрибут is-enabled вместо ng-if. Это также повлияет на прокрутку.

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

См. Документацию по адресу http://ionicframework.com/docs/api/directive/ionSideMenu/

Поделиться
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
    где в коде вы это разместили?
  • 0
    Я поместил это в основной App-Controller
0

В mainCtrl вы должны указать некоторые условия, например, когда вы не хотите отображать меню слева.

В нижних строках кода введите ng-hide = "" и сделайте эту переменную true или false из mainCtrl

<ion-nav-buttons side="left">
          <button class="button button-clear icon ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
Поделиться
  • 0
    Да, я знаю это (это то, что я сделал с ng-if), но я не хочу, чтобы левая кнопка исчезала, а "пустое" правое боковое меню на всех страницах при пролистывании влево ...
  • 0
    Хорошо, поэтому, когда мы скрываем левое боковое меню, мы также должны отключить при смахивании?
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню