ng-show/ng-if不立即更新dom高度

Question

我有一个很长的div,它是由ng-hide隐藏/显示的.这是一个基于离子演示的示例.

单击按钮以显示或隐藏longDiv.如果您在隐藏或显示页面后尝试立即滚动页面.有时您可以发现即使在longDiv隐藏之后页面也可以向下滚动.有时甚至在longDiv显示后页面也无法向下滚动.但是如果等待几秒钟,然后尝试滚动页面,滚动条可以匹配页面的实际高度.

HTML:

<ion-content ng-controller="controller">
  <button ng-click="test.show_detail=!test.show_detail">{{test.show_detail}}</button>
  <div ng-show='test.show_detail'>
    <div ng-repeat='i in test.list'>
      {{i}}
    </div>
  </div>
</ion-content>

JS:

.controller('controller', function ($scope) {
     $scope.test = {};
     $scope.test.show_detail = true;
     $scope.test.list = [];
     for(i=0; i< 1000; i++){
       $scope.test.list.push(i);
     }
}

如果longDiv中存在复杂的模板内容,则此问题很容易重现.

有什么方法可以避免这个问题吗？

Answer 1

我不太了解Ionic足以说它为什么更新这么慢,但你应该能够通过激活overflow-scroll属性的原生滚动来解决它:

<ion-content ng-controller="controller" overflow-scroll="true">

或者通过注入$ionicScrollDelegate控制器并resize手动调用:

$scope.toggle = function() {
  $scope.test.show_detail = !$scope.test.show_detail;
  $ionicScrollDelegate.resize();
};