Question

我正在创建一个带有Ionic的应用程序，首先我创建了标签并且它工作正常，但现在我想用标签创建side-menu，但我不知道我怎么能这样做。

我怎么能这样做？

的index.html

<body ng-app="starter" ng-controller="MainCtrl" animation="slide-left-right-ios7">

             <!-- The nav bar that will be updated as we navigate -->
              <ion-nav-bar class="bar bar-header bar-assertive" align-title="center"> 
              </ion-nav-bar>

              <!-- where the initial view template will be rendered -->
              <ion-nav-view>
                <ion-view>            
                  <ion-content></ion-content>
                </ion-view>
              </ion-nav-view>

  </body>

Tabs.html

<ion-view view-title="MeuPedido" align-title="center">

    <ion-tabs class="tabs-icon-top tabs-top tabs-assertive"> 
      <ion-tab icon="icon ion-fork" title="Compras">
        <ion-nav-view name="tab-empresas"></ion-nav-view>
        <ion-nav-view name="tab-produtos"></ion-nav-view>
        <ion-nav-view name="tab-qtdProduto"></ion-nav-view>
      </ion-tab>              

      <ion-tab icon="ion-ios-cart"                title="Carrinho"></ion-tab>  
      <ion-tab icon="ion-android-person"          title="Perfil"></ion-tab>
      <ion-tab icon="ion-information-circled"     title="Sobre"></ion-tab>
    </ion-tabs> 

</ion-view>

app.js

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  // setup an abstract state for the tabs directive
  .state('main', {    
      url: "/main",
      templateUrl: 'templates/main.html',  
      controller: 'MainCtrl'
  })

  .state('login', {
    url: '/login',
    templateUrl: 'templates/login.html',
    controller: 'UserCtrl'    
  })

  .state('addUsuario', {
    url: '/addUsuario',
    templateUrl: 'templates/addUsuario.html',
    controller: 'UserCtrl'    
  })

  .state('tab',{
     url: '/tab',
     abstract:true,     
     templateUrl: 'templates/tabs.html',        
  })

  .state('tab.empresas',{
    url: '/empresas',
      views: {
        'tab-empresas': {
          templateUrl: 'templates/empresas.html',  
          controller: 'EmpresaCtrl'       
        }
      }
  })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/main');
})

Answer 1

如果您有兴趣在同一个项目中创建标签和侧边菜单，可以使用this github存储库来了解。

Answer 2

完成！这很简单。

我做了。

<强>的index.html

<body ng-app="starter" ng-controller="MainCtrl" animation="slide-left-right-ios7">

             <!-- The nav bar that will be updated as we navigate -->
              <ion-nav-bar class="bar bar-header bar-assertive" align-title="center"> 
              </ion-nav-bar>

              <!-- where the initial view template will be rendered -->
              <ion-nav-view></ion-nav-view>

  </body>

<强> sidemenu.html

<ion-side-menus>
  <!-- Center content -->
  <ion-side-menu-content>
    <ion-nav-bar class="bar bar-header bar-assertive" >
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <!-- Left menu -->
  <ion-side-menu side="left" class="customSideMenu">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Header</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>        
        <ion-item menu-close href="#/app/search">
          Search
        </ion-item>
        <ion-item menu-close href="#/app/browse">
          Browse
        </ion-item>
        <ion-item menu-close href="#/app/playlists">
          Playlists
        </ion-item>
      </ion-list>
    </ion-content>

    <ion-footer-bar class="bar bar-footer">
        <h6>Desenvolvido por Iguana Sistemas</h6>
    </ion-footer-bar>

  </ion-side-menu>


</ion-side-menus>

<强> tabs.html

<ion-view view-title="MeuPedido" align-title="center">



    <div class="tabs tabs-top tabs-light">
        <a nav-clear class="tab-item disable-user-behavior active" title="Home" nav-clear ui-sref="snd.home">
          <i class="icon ion-home"></i><span class="tab-title ng-binding" ng-bind-html="title"></span>
        </a>
        <a nav-clear class="tab-item disable-user-behavior" title="Chat" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" ui-sref="snd.chat">
          <i class="icon ion-chatbubbles"></i><span class="tab-title ng-binding" ng-bind-html="title"></span>
        </a>
        <a nav-clear class="tab-item disable-user-behavior" title="Drink" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" ui-sref="snd.drink">
          <i class="icon ion-wineglass"></i><span class="tab-title ng-binding" ng-bind-html="title"></span>
        </a>
    </div>


</ion-view>

<强> app.js

.state('app',{
     url: '/app',
     abstract:true,     
     templateUrl: 'templates/sidemenu.html',        
  })

  .state('app.tabs',{
    url: '/tabs',
      views: {
        'menuContent': {
          templateUrl: 'templates/tabs.html',                 
        }
      }
  })

如何使用侧面菜单和标签创建Ionic应用程序？

2 个答案: