从侧视到tabview的离子/角度切换

时间:2016-06-22 15:17:38

标签: javascript angularjs ionic-framework ionic2

我目前在我的应用程序中使用离子滑动侧视图进行导航,但我想切换到新标签页。我已经更改了代码以生成选项卡,但$ state.go似乎不再起作用了。这是旧滑动导航的代码:

<ion-side-menus>

      <ion-pane ion-side-menu-content="">
        <ion-nav-bar class="bar-balanced nav-title-slide-ios7">
        <ion-nav-buttons side="left">
          <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
        </ion-nav-buttons>  
        </ion-nav-bar>
        <ion-nav-view></ion-nav-view>
      </ion-pane>

      <ion-side-menu side="left" class="main-menu">
        <ion-header-bar class="bar bar-header bar-dark">
          <h1 class="title">Menu</h1>
        </ion-header-bar>

          <ion-content has-header="true" ng-controller="SplashCtrl">

            <ion-list>
             <ion-item class="heading-item item item-avatar" nav-clear="" menu-close="" ui-sref="app.profile">

          <div class="user-image-container">
            <pre-img ratio="_1_1" helper-class="rounded-image">
              <img class="user-image" ng-src="img/logo.jpg" spinner-on-load="">
            </pre-img>
          </div>
          <h2 class="greeting">{{welcomename}}</h2>
          <p class="message">Welcome back</p>
        </ion-item>
        <ion-item class="item-icon-left" nav-clear="" menu-close="" ui-sref="utab.google" ng-click="googleLoginClick()">
          <i class="icon ion-document"></i>
          <h2 class="menu-text">My Diary</h2>
        </ion-item>

        <ion-item class="item-icon-left" nav-clear="" menu-close="" ui-sref="utab.history" ng-click="historyClick()">
          <i class="icon ion-document"></i>
          <h2 class="menu-text">Search</h2>
        </ion-item>

        <ion-item class="item-icon-left" nav-clear="" menu-close="" ui-sref="utab.tasklist" ng-click="tasklistClick()">
          <i class="icon ion-document"></i>
          <h2 class="menu-text">Task List</h2>
        </ion-item>

        <ion-item class="item-icon-left" nav-clear="" menu-close="" ui-sref="utab.myforms" ng-click="myFormsClick()">
          <i class="icon ion-document"></i>
          <h2 class="menu-text">Unsent Instructions ({{unsentFormsCount}})</h2>
        </ion-item>

        <ion-item class="item-icon-left" nav-clear="" menu-close="" ui-sref="utab.banking" ng-click="bankingClick()">
          <i class="icon ion-document"></i>
          <h2 class="menu-text">Banking</h2>
        </ion-item>

        <ion-item class="item-icon-left" nav-clear="" menu-close="" ng-click="logoutClick()">
          <i class="icon ion-document"></i>
          <h2 class="menu-text">Logout</h2>
        </ion-item>


            </ion-list>

        </ion-content>
      </ion-side-menu>

    </ion-side-menus>

ng-clicks中的“XXclick”功能只需调用$ stat.go即可。这是新导航:

(香港专业教育学院刚刚添加了最顶层的代码来减少代码)

<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-content has-header="true" ng-controller="SplashCtrl">

  <ion-tab title="Diary" icon-off="ion-ios-calendar-outline" icon-on="ion-ios-calendar" ui-sref="utab.google" ng-click="googleLoginClick()">
    <ion-nav-view name="diary"></ion-nav-view>
  </ion-tab>

</ion-content>
</ion-tabs>

感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

首先不需要在标签中使用离子含量。路由中也应该有问题。你能更新完整代码还是创建代码笔?所以我可以帮助你。我认为下面的代码笔链接可以帮助你。

'http://codepen.io/nirmal25/pen/BzQxzX'