angularjs - 如何在没有新模板的情况下在 Ionic 选项卡中呈现内容，而只需像在 Bootstrap 中切换选项卡

Question

我们正在构建一个包含三个选项卡的模板。这些选项卡应该像在这个例子中一样工作:https://getbootstrap.com/javascript/#tabs-examples

我们只想在选项卡中切换内容。我们如何在不需要新模板的情况下做到这一点？

我们的细节模板是这样的:

<ion-view view-title="{{item.summary.name}}">
  <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
  </ion-nav-buttons>


  <div class="bar bar-subheader bar-assertive">
    <ion-tabs class="tabs-background-assertive tabs-color-light">
      <ion-tab title="Summary">
        <ion-nav-view name="summary" ></ion-nav-view>
      </ion-tab>

      <ion-tab title="Ingridents">
        <ion-nav-view name="ingdts"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Videos">
        <ion-nav-view name="video"></ion-nav-view>
      </ion-tab>

    </ion-tabs>
  </div>

</ion-view>

我们试过了， https://stackoverflow.com/a/31506520/170445但它不工作。

Answer 1

在您的 Controller 中有某种​​类型的对象来控制可见性:

 $scope.pageFlow = {
    summary: true,
    ingts: false,
    video: false
 }

然后在您查看时只显示或隐藏 div。您还可以创建一个作用域方法来处理控件，但不是必需的。需要注意的一件事是 ion-tabs 在 ion-content 之外，但在 ion-view 内

<ion-view view-title="{{item.summary.name}}">
 <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
 </ion-nav-buttons>
 <ion-content padding="true" scroll="true" class="has-header">
    <div ng-if="pageFlow.summary">
        Summary Goes Here
    </div>
    <div ng-if="pageFlow.ingdts">
        Ingredients Goes Here
    </div>
    <div ng-if="pageFlow.video">
        Video Goes Here
    </div>
 </ion-content>
 <ion-tabs class="tabs-background-assertive tabs-color-light">>
    <ion-tab title="Summary" on-select="pageFlow.summary = true; pageFlow.video = false; pageFlow.ingdts = false">
    </ion-tab>
    <ion-tab title="Ingridents" on-select="pageFlow.ingdts = true; pageFlow.video = false; pageFlow.other = false">
    </ion-tab>
    <ion-tab title="Videos" on-select="pageFlow.video = true; pageFlow.ingdts = false; pageFlow.other = false">
    </ion-tab>
 </ion-tabs></ion-view>

我还应该注意，您现在只需要一个 Controller 来查看 View ，因为所有内容都在一个内容页面内。