ionic的ion-tabs和ion-side-menus

最近在使用ionic做一个简单的app时，同时使用了<ion-tabs></ion-tabs>标签和<ion-side-menus></ion-side-menus>，效果就是4个标签页，其中第二个标签页有一个侧边栏可以拉，效果图如下

点击按钮后可以调出侧边栏，点击侧边栏的选项可以调出新的视图，代码大概如下

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

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

  <ion-tab title="新闻" icon="ion-ios-information" href="#/tab/about">
    <ion-nav-view name="about-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="联系人" icon="ion-ios-world" ui-sref="tabs.contact">
    <ion-nav-view name="contact-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="登录" icon="ion-ios-person" ui-sref="tabs.login" >
    <ion-nav-view name="login-tab"></ion-nav-view>
  </ion-tab>
</ion-tabs>

这里要注意的是，这里使用的是UI-Router，不是ng-Router，前者是基于状态（state）的，想要触发state，有三种方式：1.触发ui-href（ionic封装的是ui-sref），就是直接点击了状态 2.点击了某个状态对应的href 3.使用函数

$state.go('stateName'),这样的方式适合放在service里面调用

记录备忘