在模态中使用ionic Tabs指令

Question

我有一个离子模态窗口，用作设置菜单 计划是使用带有小标题的模态，并在内容中使用ion-tabs指令以简单的方式每次点击显示并隐藏一个div

我已经阅读了文档，说他们有一个与使用离子内容中的标签相关的错误，所以我知道它。

然后我怎么能实现这个功能，如果我删除离子内容而不是tab指令被推下而不是显示在屏幕上，这里是模态的标记：

  <ion-modal-view>

<ion-header-bar style="background-color: #40863E">
     <h1 class="title" style="color:white;">My Account</h1>
     <div class="button button-clear" ng-click="closeModal()"><span class="icon ion-close"></span></div>
</ion-header-bar>

<ion-content>

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

              <ion-tab title="Message" icon-on=" ion-android-chat" icon-off="ion-ios7-filing-outline">
                <!-- Tab 1 content -->
              </ion-tab>

              <ion-tab title="Payment History" icon-on="ion-social-usd" icon-off="ion-ios7-clock-outline" on-select="showPayments()">
              </ion-tab>

              <ion-tab title="Edit" icon-on="ion-android-settings" icon-off="ion-ios7-gear-outline">
                <!-- Tab 3 content -->  
              </ion-tab>

               <ion-tab title="Sign Out" icon-on="ion-log-out" icon-off="ion-ios7-gear-outline">
                <!-- Tab 3 content -->
              </ion-tab>

        </ion-tabs>

<div id="payments" class="row" style="margin-top:43px;height:51px;">
some payments content
</div>

</ion-content>


  </ion-modal-view>

* UPDATE 添加图片来描述问题

Answer 1

尝试使用离子窗格而不是离子含量。

Answer 2

删除<ion-content>标记，然后您可以使用CSS将标签顶部向下推。 ionContent很适合知道何时使用标题，但是当ionTabs在里面时确实存在一些问题。类似于以下内容，但您可能需要使用更具体的CSS选择器。

.tabs { margin-top: 44px; }