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

发布时间：2020-12-17 10:16:06 所属栏目：安全来源：网络整理

导读：我有一个很长的div,它是由ng-hide隐藏/显示的. 这是基于离子 demo的样品. 单击按钮以显示或隐藏longDiv.如果您在隐藏或显示页面后尝试立即滚动页面. 有时您可以发现即使在longDiv隐藏之后页面也可以向下滚动.有时甚至在longDiv显示后页面也无法向下滚动.但是

我有一个很长的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);
     }

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!