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

前端之家收集整理的这篇文章主要介绍了angularjs – ng-show / ng-if不立即更新dom高度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个很长的div,它是由ng-hide隐藏/显示的.
这是基于离子 demo的样品.

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

HTML:

  1. <ion-content ng-controller="controller">
  2. <button ng-click="test.show_detail=!test.show_detail">{{test.show_detail}}</button>
  3. <div ng-show='test.show_detail'>
  4. <div ng-repeat='i in test.list'>
  5. {{i}}
  6. </div>
  7. </div>
  8. </ion-content>

JS:

  1. .controller('controller',function ($scope) {
  2. $scope.test = {};
  3. $scope.test.show_detail = true;
  4. $scope.test.list = [];
  5. for(i=0; i< 1000; i++){
  6. $scope.test.list.push(i);
  7. }

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

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

我不太了解Ionic足以说它为什么更新这么慢,但你应该能够通过使用overflow-scroll属性激活原生滚动来解决它:
  1. <ion-content ng-controller="controller" overflow-scroll="true">

或者通过在控制器中注入$ionicScrollDelegate并手动调用resize:

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

猜你在找的Angularjs相关文章