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

Question

我有一个很长的 div，它是由 ng-hide 隐藏/显示的。 这是基于 ionic demo 的示例.

单击按钮可以显示或隐藏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 容器中存在复杂的模板内容，则很容易重现此问题。

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

Answer 1

我不太了解 Ionic，无法解释为什么它更新这么慢，但您应该能够通过使用 overflow-scroll 属性激活 native 滚动来解决它:

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

或者通过在 Controller 中注入(inject) $ionicScrollDelegate 并手动调用 resize:

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