Ng-show / ng-if does not update the height of the house immediately

Question

I have a long div that hides / shows ng-hide. here is an example based on the ion demo .

Click the button to show or hide longDiv. If you try to scroll the page immediately after hiding or displaying it. sometimes you may find that the page may scroll even after the longDiv is hidden. And sometimes the page cannot scroll even after longDiv. But if you wait a second, try scrolling the page, the scroll bar may correspond to the actual page 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 problem is very easy to reproduce if longDiv has complex template content.

Is there any way to avoid this problem?

Answer 1

, , , , 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 , .

, , , , , , , .