程序员经验分享-hwhale

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

2024-01-12

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

我有我的菜单.html file:

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

My 索引.html's body tag看起来就像这样：

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

And the 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');
   });

第1页.html and page2.html两者都包含以下结构：

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

我实际上可以做什么来只显示我的侧菜单（菜单.html) on 第1页.html并且不在page2.html??我有什么遗漏的吗？

有没有办法插入菜单.html仅在那些页面上显示我希望它出现的内容，并忘记创建使用它的状态templateUrl?


您的所有页面都有侧面菜单的原因是因为您将“应用程序”状态作为其父状态。当一个状态被激活时，它的模板会自动插入到<ion-view>其父状态的模板。如果它是顶级状态，因为它没有父状态，那么它的父模板是index.html. The appstate 有侧面菜单。

您的代码应如下所示：

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 https://github.com/angular-ui/ui-router/wiki

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

ionicframework

Ionic - 仅在具体页面中显示侧面菜单 的相关文章

随机推荐