如何使用Ionic选项卡向ui-router添加新状态

Question

我正在使用Ionic框架选项卡式视图构建应用程序。 Ionic已经在底部给了我标签，但我还想在顶部有两个按钮来改变视图。我似乎无法让这个工作。特别是右上角的那个（见截图）。现在，当你点击它;它什么都不做。

这是他们给我的标签界面：

<ion-view id="page1">
  <ion-tabs class="tabs-stable tabs-icon-bottom" id="tabsController-tabs1">
    <ion-tab icon="ion-ios-photos" href="#/page1/index" id="tabsController-tab1">
      <ion-nav-view name="tab1"></ion-nav-view>
    </ion-tab>

    <ion-tab icon="ion-camera" ng-if="timer === '0m'" ng-click="indexController.camera()">
      <ion-nav-view name="tab3"></ion-nav-view>
    </ion-tab>
    <ion-tab title="{{timer}}" ng-if="timer !== '0m'" disabled="true" ng-if="true" ng-click="indexController.camera()">
      <ion-nav-view name="tab3"></ion-nav-view>
    </ion-tab>
    <ion-tab icon="ion-android-list" href="#/page1/bestMoments" id="tabsController-tab2">
      <ion-nav-view name="tab2"></ion-nav-view>
    </ion-tab>
  </ion-tabs>
</ion-view> 

在我的routes.js中，我的状态为新按钮：

  .state('tabsController.myMoments', {
    url: '/myMoments',
    cache:false,
    views: {
      'tab4': {
        templateUrl: 'myMoments/myMoments.html',
        controller: 'MyMomentsController',
        controllerAs: 'vm'
      }
    }
  })

我也有点'破解'按钮。它实际上不是一个标签状态，它只是一个带有ng-click的按钮，可以将你发送到所需的状态。我把这段代码放在我的index.html中：

    <ion-nav-buttons side="right">
    <div class="ion-person" ng-click="indexController.redirectMyMoments()"></div>
  </ion-nav-buttons>

我不明白我应该把'tab4'放在哪里。我的假设是它与我的其他选项一起使用，但无论我把它放在哪里，它似乎弄乱了我的其他标签，我不想在那里制作另一个离子标签，因为我不希望它在底部。

我还注意到，如果我将视图名称更改为“tab3”，它实际上可以正常更改状态，但是，当您单击右上角的视图时，它会突出显示第三个选项卡。 / p>

感谢您的帮助。

编辑：

我的问题：

https://plnkr.co/edit/PTS9Jt?p=preview

Answer 1

您的上一个标签名称假设为test_calc，而不是标签界面中的tab4。

tab2

                

<ion-view id="page1">

 

用此替换您的代码。

-------------------------- UPDATE -------------------- ----

现在，对于Tab-3，您不能有多个具有相同名称的选项卡。所以你可以在其中做的是你可以在其中创建一个嵌套视图。在，你可以有2个不同名称的视图..一个计时器和一个摄像头（或任何你想要的）。以下是一个选项卡中多个视图的引用。 ionic multiple view states for one tab

现在，您的每个标签都会有一个唯一的名称和一个唯一关联的 <ion-tab icon="" href="#/page1/index" id="tabsController-tab2"> <ion-nav-view name="tab2"></ion-nav-view> </ion-tab> <ion-tab icon="ion-camera" ng-if="timer === '0m'" ng-click="indexController.camera()"> <ion-nav-view name="tab3"></ion-nav-view> </ion-tab> <ion-tab title="{{timer}}" ng-if="timer !== '0m'" disabled="true" ng-if="true" ng-click="indexController.camera()"> <ion-nav-view name="tab3"></ion-nav-view> </ion-tab> <ion-tab icon="ion-android-list" href="#/page1/bestMoments" id="tabsController-tab4"> <ion-nav-view name="tab4"></ion-nav-view> </ion-tab> 。因此，您可以根据需要设置样式。