Ионный - отображение бокового меню ТОЛЬКО на конкретных страницах

Я разрабатываю приложение с Ionic Framework, и я хочу показать только боковое меню в некоторых конкретных видах, но не во всех представлениях.

У меня есть файл menu.html:

<ion-side-menus>

  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-positive nav-title-slide-ios7">
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-pane>

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

    <ion-content class="mymenu">

      <div id="menu-list">
        <ion-list class="list">
          <ion-item item-type="item-icon-left" nav-clear menu-close href="#">
            <i class="icon ion-home"></i><span>Menu Item</span>
          </ion-item>
           ...
        </ion-list>
      </div>

    </ion-content>

  </ion-side-menu>

</ion-side-menus>

Мой тег body index.html выглядит так:

 <body ng-app="myApp">
   <ion-nav-view></ion-nav-view>
 </body>

И код JavaScript, в котором я настроил приложение, содержит:

    .config(function($stateProvider, $urlRouterProvider) {
      $stateProvider
        .state('app', {
          url: "/app",
          abstract: true,
          templateUrl: "templates/menu.html",
          controller: 'AppCtrl'
        })

        .state('app.page1', {
            url: "/page1",
            views: {
                'menuContent' :{
                    templateUrl: "templates/page1.html"
                }
            }
        })

        .state('app.page2', {
            url: "/page2",
            views: {
                'menuContent' :{
                    templateUrl: "templates/page2.html"
                }
            }
        })

        // etc...

       // if none of the above states are matched, use this as the fallback
       $urlRouterProvider.otherwise('/app/page1');
   });

page1.html и page2.html оба содержат следующую структуру:

<ion-view title="something">
   <ion-content>
       ... // here comes the html content of the page
   </ion-content>
</ion-view>

Что я могу сделать, чтобы показывать только боковое меню (menu.html) на page1.html, а не на page2.html > ?? Есть ли что-то, чего я не хватает?

Есть ли способ вставить содержимое menu.html только на тех страницах, которые я хочу, чтобы он появился и забыл о создании состояния, которое использует его как templateUrl?

Ответ 1

Причина, почему все ваши страницы имеют боковое меню, - это то, что вы "приложение" заявляете как свое родительское состояние. Когда состояние активировано, его шаблоны автоматически вставляются в <ion-view> его шаблона родительского состояния. Если это состояние верхнего уровня, потому что оно не имеет родительского состояния, то его родительский шаблон index.html. Состояние app имеет в нем боковое меню.

Ваш код должен выглядеть так:

config(function($stateProvider, $urlRouterProvider) {
      $stateProvider
        .state('app', {
          url: "/app",
          abstract: true,
          templateUrl: "templates/menu.html",
          controller: 'AppCtrl'
        })

         //this state has the 'app' state (which has the sidemenu) as its parent state
        .state('app.page1', {
            url: "/page1",
            views: {
                'menuContent' :{
                    templateUrl: "templates/page1.html"
                }
            }
        })

         //this state has no parent, so it uses 'index.html' as its template. The index page has no 
         //sidemenu in it
        .state('page2', {
            url: "/page2",
            templateUrl: "templates/page2.html"
            }
        })

         ///more code here
   });

Отъезд https://github.com/angular-ui/ui-router/wiki

Ионный - отображение бокового меню ТОЛЬКО на конкретных страницах

Ответ 1

Ответ 2

Ответ 3