滚动Ionic 1子视图而不滚动父视图

Question

我正在尝试在标签式Ionic 1应用中设置滚动子标签。我们的想法是拥有一个包含基本信息内容的标题和一个button-bar来在各个子标签之间导航。这些子标签的内容应该能够滚动而不用滚动主要父内容。

我已经能够设置这一切，除了，以便让子标签内容单独滚动。

我尝试过的事情：

• 将子内容放在自己的ion-content中。生成的内容完全覆盖父标签内容。
• 将子内容放在自己的ion-scroll中。右侧有一个巨大的丑陋滚动条，内容实际上并不滚动。

I've created a Plunker here that demonstrates what I'm trying to do.关于如何优雅地构建这样的东西的任何见解？

父标签视图

<ion-view title="Home">
  <ion-content style="" class="has-header" scroll="false" padding="true">
      <div class="item item-avatar">
        <img src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png">
        <h3>
          <i class="ion-person"></i> Username
          <p>Basic user fact 1</p>
          <p>Basic user fact 2</p>
        </h3>
      </div>

      <div class="button-bar">
         <a class="button button-positive" ui-sref="tab.dash.about">About me</a>
         <a class="button button-assertive" ui-sref="tab.dash.photos">Photos</a>
      </div> 
      <ui-view name="tab-dash-content"></ui-view>
  </ion-content>
</ion-view>

示例标签子内容

<ion-scroll direction="y">
  <div class="list">
    <div class="item item-text-wrap">
      These 20 items below should scroll without scrolling the section or buttons above!
    </div>
    <div class="item" ng-repeat="i in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20] track by $index">
      About item: {{i}}
    </div>
  </div>
</ion-scroll>