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

问题

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?

回答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();
};

回答2:

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.

来源：https://stackoverflow.com/questions/34605039/ng-show-ng-if-doesnt-update-dom-height-immediately