Question

我正在开发一个带有Ionic Framework的应用程序，我只想在一些具体视图中显示侧边菜单，但不是在每个视图中都显示。

我＆＃39;拥有 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 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 上显示我的侧边菜单（ menu.html ）而不是 page2.html ??有什么我想念的吗？

是否有办法仅将 menu.html 内容插入我希望其显示的页面，而忘记创建将其用作templateUrl的状态？

Answer 1

您的所有网页都有侧边菜单的原因是因为您'app'表示其父级状态。激活状态后，其模板将自动插入其父状态模板的<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

Answer 2

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

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

进入州

Answer 3

只需添加hide-nav-bar =＆＃34;真的＆＃34;在离子视图

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

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

3 个答案: