ng-show/ng-if doesn't update dom height immediately

Question

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

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

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

Is there any method to avoid this issue?

Answer 1

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">

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

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