离子 - 仅在具体页面中显示侧面菜单答案

【问题标题】：Ionic - Showing side-menu ONLY in concrete pages离子 - 仅在具体页面中显示侧面菜单
【发布时间】：2014-11-22 18:20:59
【问题描述】：

我正在使用 Ionic 框架开发一个应用程序，我只想在一些具体视图中显示一个侧面菜单，而不是在每个视图中。

我有我的 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>

我的 index.html 的 body 标签 看起来完全像这样：

 <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>

我实际上可以做些什么来只在 page1.html 上而不是 page2.html 上显示我的侧边菜单 (menu.html) >??我有什么遗漏吗？？

有没有办法只在我希望它出现的页面上插入 menu.html 内容而忘记创建将其用作templateUrl 的状态？

【问题讨论】：

标签： ionic-framework

【解决方案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

【讨论】：

非常感谢Akinkunle Allen，我怀疑发生了什么事，因为'app'是每个状态的父状态，但不知道如何解决 - 这是我的第一次体验使用离子框架。问候！
干杯 @charliebrownie 我很高兴能帮上忙
一旦我更改了“app”状态，我的页面开始将 index.html 视为父级并停止读取我正在调用的 HTML 中的内容。任何想法？ // LOGIN .state('login', { url: '/login', views: { 'menuContent': { templateUrl: 'templates/login.html' } } })
是的，它解决了这个问题，但它会产生另一个问题，因为页面更改之间的过渡效果将不再起作用。那么你有什么解决方案吗？

【解决方案2】：

如果您的问题很简单，请使用

onExit: function(){
    angular.element(document.querySelector('#menuAPP')).removeClass('hidden');
}

进入状态

【讨论】：

【解决方案3】：

只需在 ion-view 中添加 hide-nav-bar=" true "

<ion-view title="Login" **hide-nav-bar="true"** id="page" class=" "> </ion-view>

【讨论】：