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

Question

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

我正在开发一个带有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>

Run Code Online (Sandbox Code Playgroud)

我的index.html的body标签看起来像这样:

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

Run Code Online (Sandbox Code Playgroud)

我设置应用程序的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');
   });

Run Code Online (Sandbox Code Playgroud)

page1.html和page2.html都包含以下结构:

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

Run Code Online (Sandbox Code Playgroud)

我实际上只能在page1.html上显示我的侧边菜单(menu.html)而不是在page2.html上做什么？有什么我想念的吗？

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

Answer 1

Aki*_*len 26

您的所有页面都有侧边菜单的原因是因为您'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
   });

Run Code Online (Sandbox Code Playgroud)

查看https://github.com/angular-ui/ui-router/wiki

归档时间：	11 年前
查看次数：	11749 次
最近记录：	9 年，5 月前