8

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?

2 Answers 2

9

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();
};
3
  • Let me know how it goes.
    – tasseKATT
    Jan 6, 2016 at 8:54
  • My last update is wrong. I delete it. overflow-scroll="true" and $ionicScrollDelegate both can work. if we use overflow-scroll=true, it may cause other issues, so $ionicScrollDelegate is better in my situation. @tasseKATT
    – Leon
    Jan 14, 2016 at 1:23
  • It's a good solution. Looking at Ionic itself there's a 'self.hintResize = ionic.debounce(function() { self.resize(); }, 1000, true);' as part of 'ionic.views.Scroll', meaning that Ionic debounces the resizing for a full second. May 30, 2016 at 15:36
0

One thing that you could do is this:

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

Your controller would now look something like this:

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

Here's the breakdown of what I did:

  • added two new dependencies ($timeout, and $ionicLoading) to your controller
  • added a function handleClick which shows a loading message for 3 seconds and then it hides it

You would probably have to play with the proper timeout and while this certainly isn't a perfect solution, I hope it helps a bit.

1
  • Thanks for your answer, Nikola. This is so dirty, I can not accept it.
    – Leon
    Jan 5, 2016 at 15:21

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.