Ionic：将视图注入拆分视图时松散的垂直滚动条

Question

一直在玩split view，开始看routing了。我想设置一个"main layout" splitview，然后在运行时使用路由将各种视图注入其中，就像这个Plunk。

因此，在布局视图 (layout.html) 中，我有

<ion-side-menus>
<ion-side-menu-content>
    <ion-header-bar class="bar-positive">
       <h1 style="text-align: left" class="title">Main</h1>
    </ion-header-bar>
    <ion-content >
        <!-- Inject Main view here -->
        <ion-nav-view name='main'></ion-nav-view>
    </ion-content>

</ion-side-menu-content>

<ion-side-menu width=200 expose-aside-when='(min-width:300px)'>
    <ion-header-bar class="bar-royal">
        <h1 style="text-align: left" class="title">Options</h1>
    </ion-header-bar>
    <ion-content>
      <!-- Inject Side options vew here -->
      <ion-nav-view name='options'></ion-nav-view>
    </ion-content>
</ion-side-menu>

路由设置在script.js...

app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
 .state('view1', {
   url: '/',
   views: {
      'main': {
       templateUrl: 'mainv1.html'
     },
     'options': {
        templateUrl: 'optionsv1.html'
     },      
   }
   });

    $urlRouterProvider.otherwise('/');
   });

视图似乎可以正常显示，但我似乎在 splitview 中松动了滚动条（请参阅右侧视图，其中我添加了 100 个 <div> 元素。

任何人都知道是否有办法执行上述操作并使垂直滚动起作用？

在此先感谢您的帮助！

Answer 1

只需在 mainv1.html:

中添加一个 ion-scroll 指令

<div ng-controller='main'>
  <ion-scroll zooming="true" direction="xy" style="height: 100%;">
    <div ng-repeat='d in data'>{{d}}</div>
  </ion-scroll>
</div>

Working plunker.

Ionic：将视图注入拆分视图时松散的垂直滚动条

Ionic: Loose vertical scrollbars when injecting views into a splitview

angularjs

ionic