javascript - 从侧 View 到选项卡 View 的 ionic /Angular 切换

Question

我目前在我的应用程序中使用 ionic 滑动侧 View 进行导航，但我想切换到新选项卡。我已经更改了代码来制作选项卡，但 $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>

感谢任何帮助。

Answer 1

首先不需要在选项卡中使用 ionic 内容。路由也应该有问题。您可以更新完整代码或创建代码笔吗？所以我可以帮助你。我认为下面的代码笔链接会对您有所帮助。

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