Question

我有一个很长的div，它是由ng-hide隐藏/显示的。这是一个基于离子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);
     }
}

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

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

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();
};

Answer 2

你可以做的一件事是：

<button ng-click="handleClick()">{{test.show_detail}}</button>

您的控制器现在看起来像这样：

.controller('controller', function ($scope, $timeout, $ionicLoading) {
    $scope.test = {};
    $scope.test.show_detail = true;
    $scope.test.list = [];

    for(i=0; i< 1000; i++){
        $scope.test.list.push(i);
    };

    $scope.handleClick = function(){
        $ionicLoading.show({
            template: 'Loading...'
        });

        $scope.test.show_detail = !$scope.test.show_detail;

        $timeout(function(){
            $ionicLoading.hide();
        } , 3000);  
    };
}

这是我所做的事情的细分：

向您的控制器添加了两个新的依赖项（$timeout和$ionicLoading）
添加了一个函数handleClick，它显示加载消息3秒钟然后隐藏它

你可能不得不玩适当的超时，虽然这当然不是一个完美的解决方案，但我希望它有所帮助。

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

2 个答案: