Javascript 在ionic1中，屏幕旋转时出现白色屏幕

我有一个屏幕，当我改变方向时，屏幕需要一些时间来改变方向，同时我得到白色屏幕，有人能告诉我为什么会发生这种情况，即使我尝试使用

window.addEventListener("orientationchange", function() {
    $ionicScrollDelegate.resize(); 
  }, false);

在跑步中，但我仍然有同样的问题

方向变更代码：

function toggleOrientation () {
  $log.log('orientation: ', vm.orientation);
  if (vm.orientation === 'portrait') {
    vm.orientation = 'landscape';
    screen.orientation.lock('landscape');
    $log.log('TrackeventLandscape', Track.Orientation_landscape);
    Analytics.trackEvent(Track.Orientation_landscape);
  } else {
    vm.orientation = 'portrait';
    screen.orientation.lock('portrait');
    $log.log('Trackeventportrait', Track.Orientation_portrait);
    Analytics.trackEvent(Track.Orientation_portrait);
  }
}

Html:

{{“nodatatoshow_message”| translate}



{{date}}
{{“用户信息”{124;翻译}
{{“name_message”{124; translate}}
{{“desc_message”| translate}
{{“收入”信息{124;翻译}
{{“费用”信息{124;翻译}
{{daybook.user\u type=='user'？'Expense'：daybook.user\u type}
{{daybook.transaction_type=='Expense'？daybook.category:daybook.location | limit}
账单编号：{{daybook.账单编号}
{{daybook.description}isNullExpense}
{{daybook.category？daybook.category:daybook.description | isNullAdvance}}
{{daybook.category？daybook.category:daybook.description | isNullPayment}}
{{daybook.amount_in}
{{daybook.amount_out}

<ion-content>
  <div class="list nodata padding-15" ng-if="vm.daybooks.length === 0">
     <h4>
        <p>{{"nodatatoshow_message" | translate}}</p>
     </h4>
  </div>
  <ul class="trans-item m-t-20 m-r-10 m-l-10">
     <li ng-repeat="date in vm.uniqueDaybooks" class="FramerList list">            
        <a class="item item-icon-right dblist"> {{date}}
        <i class="icon ion-android-download" ng-click="vm.download(date)"></i>
        </a>            
        <div class="tableContainer">
          <table class="ledgerTable" cellspacing="10">
             <thead>
                <tr class="ledgerTblHeader">
                   <th>{{"user_message" | translate}}</th>
                   <th>{{"name_message" | translate}}</th>
                   <th>{{"desc_message" | translate}}</th>
                   <th>{{"income_message" | translate}}</th>
                   <th>{{"expenses_message" | translate}}</th>
                </tr>
             </thead>                 
             <tbody>
                <tr ng-repeat="daybook in vm.daybooks | filter: {date: date}" ng-click="vm.gotoDaybookDetail(daybook)">
                   <td>{{daybook.user_type === 'User' ? 'Expense' : daybook.user_type}}</td>
                   <!-- <td>{{daybook.location | limit }}</td> -->
                   <td>{{daybook.transaction_type === 'Expense' ? daybook.category : daybook.location | limit }}</td>
                   <td ng-if="daybook.transaction_type === 'FarmerTrade'">Bill-No: {{daybook.bill_no}}</td>
                   <td ng-if="daybook.transaction_type === 'Expense'">{{daybook.description | isNullExpense}}</td>
                   <td ng-if="daybook.transaction_type !== 'BuyerPayment' && daybook.transaction_type !== 'FarmerTrade' && daybook.transaction_type !== 'Expense'">{{daybook.category ? daybook.category : daybook.description | isNullAdvance}}</td>
                   <td ng-if="daybook.transaction_type === 'BuyerPayment'">{{daybook.category ? daybook.category : daybook.description | isNullPayment}}</td>
                   <td align="right">{{daybook.amount_in}}</td>
                   <td align="right">{{daybook.amount_out}}</td>
                </tr>
             </tbody>
          </table>
        </div>
     </div>
     </li>
  </ul>