Question

我创建了一个带有标签的Ionic侧边菜单的应用程序。如果我使用离子v0.9.27，则会出现菜单，但如果版本为1.0及更高版本则不会出现。

我哪里错了？

HTML结构

<ion-nav-view>
   <ion-side-menus>
       <ion-pane ion-side-menu-content>
           <ion-nav-view name="main"></ion-nav-view>         
       </ion-pane>
           <ion-side-menu side="left"> </ion-side-menu>
   </ion-side-menus>
</ion-nav-view>

使用0.9.27

Plnrk：http://plnkr.co/edit/Sdsam9Tef0cy4bydbrxq?p=preview

不使用1.0

Plnrk：http://plnkr.co/edit/swWJph?p=preview

使用1.0，但代码嵌入在html中

Plnkr：http://plnkr.co/edit/ty6m8Q8DNQssZLKzOP8W?p=info

Answer 1

它之前的效果令人着迷。

这是它的工作方式：http://plnkr.co/edit/cmJYiT?p=preview

侧面菜单应该嵌入到index.html中，其他所有内容都应该分成其他文件。

的index.html

    <!DOCTYPE html>
    <html ng-app="myApp">

        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
            <title>Ionic Framework Example</title>
            <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
            <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
            <script src="app.js"></script>
        </head>

        <body>

         <ion-side-menus>

          <ion-pane ion-side-menu-content>
            <ion-nav-bar class="bar-positive nav-title-slide-ios7">
              <ion-nav-back-button class="button-icon"><span class="icon ion-ios7-arrow-left"></span></ion-nav-back-button>
            </ion-nav-bar>
            <ion-nav-view></ion-nav-view>
          </ion-pane>

          <ion-side-menu side="left">
            <ion-header-bar class="bar bar-header bar-dark"></ion-header-bar>
            <ion-content has-header="true">
              <ion-list>
                <ion-item href="#/" menu-close>Home</ion-item>
                <ion-item href="#/about" menu-close>About</ion-item>
              </ion-list>
            </ion-content>
          </ion-side-menu>

        </ion-side-menus> 

        </body>
    </html>

tabs.html

    <ion-view title="Home">

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
      </ion-nav-buttons>


      <ion-tabs class="tabs-icon-top tabs-positive">

        <ion-tab title="Home" icon="ion-home" href="#/tab/home">
          <ion-nav-view name="home-tab"></ion-nav-view>
        </ion-tab>

        <ion-tab title="Settings" icon="ion-gear-a" href="#/tab/settings">
          <ion-nav-view name="settings-tab"></ion-nav-view>
        </ion-tab>

        <ion-tab title="Sign-Out" icon="ion-log-out">
        </ion-tab>

      </ion-tabs>
    </ion-view>

加上其他页面......

版本1.0及更高版本中的选项卡不显示离子侧菜单

1 个答案:

的index.html

tabs.html