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

我有一个很长的 div，它是由 ng-hide 隐藏/显示的。 这是一个基于离子的示例demo http://codepen.io/leonz/full/bEqbKM/.

单击该按钮可以显示或隐藏 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);
     }
}

如果长 div 容器中有复杂的模板内容，则很容易重现此问题。

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

我不太了解 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();
};