ng-show / ng-if不立即更新dom高度 [英] ng-show/ng-if doesn't update dom height immediately

问题描述

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

I have a long div which is hide/show by ng-hide. here is a sample based on ionic demo.

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

Click the button to make the longDiv show or hide. If you try to scroll the page immediately after hiding or showing it. sometimes you can find the page can scroll down even after longDiv hide. And sometimes page can not scroll down even after longDiv show. But if you wait for seconds, then try to scroll the page, the scroll bar can match the page's actual height.

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中有复杂的模板内容，则很容易重现此问题。

This issue is very easy to reproduce if there are complex template content in the longDiv.

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

Is there any method to avoid this issue?

推荐答案

我不知道离子是否足以说明为什么它更新这么慢，但你应该能够通过使用 overflow-scroll 属性激活原生滚动来解决它：

I don't know Ionic well enough to say why it updates so slow, but you should be able to solve it either by activating native scrolling with the overflow-scroll attribute:

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

或者在控制器中注入 $ ionicScrollDelegate 并调用调整大小手动：

Or by injecting $ionicScrollDelegate in your controller and calling resize manually:

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

这篇关于ng-show / ng-if不立即更新dom高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！