在模态中使用 ionic Tabs 指令答案

【问题标题】：Using ionic Tabs directive inside a modal在模态中使用 ionic Tabs 指令
【发布时间】：2014-12-08 21:00:18
【问题描述】：

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

我读过文档说他们有一个与使用离子内容中的选项卡相关的错误，所以我知道。

如果我删除了 ion-content 而不是 tabs 指令被按下而不是显示在屏幕顶部，那么我该如何实现这个功能，这里是模态的标记：

  <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>

*更新添加图片描述问题

【问题讨论】：

标签： angularjs ionic-framework

【解决方案1】：

尝试使用 ion-pane 而不是 ion-content。

【讨论】：

省去很多麻烦

【解决方案2】：

删除<ion-content> 标签，然后您可以使用 CSS 将选项卡的顶部向下推。 ionContent 可以很好地了解何时使用标题，但是当 ionTabs 在里面时它确实存在一些问题。如下所示，但您可能需要使用更具体的 CSS 选择器。

.tabs { margin-top: 44px; }

【讨论】：

我想我尝试过这样的事情，上面显示了带有 id 付款的 div 的内容，但我会在晚上试一试以确保并让你知道。谢谢！！
如果您能提供完整的代码，我可以更好地帮助确保 CSS 正确设置选项卡的样式。
嗨，杰里米，我再次使用您建议的 css 属性进行了验证，但它没有用。我上传了一张图片来描述这个问题。目前没有任何自定义 css 我使用，我还没有实现控制器所以没有 js，我拥有的 html 代码是整个 html 文件
@JeremyWilken，您是否更新了此代码笔示例？我一直在尝试做同样的事情。