Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS changes are not applied immediately

to lower the head should change color, but the change is not seen, if I open the menu only then change can be seen.

<ion-header-bar class="thediv" ng-class="{scrolling: isActive}">
     <ion-nav-bar class="bar-clear "  >         
     </ion-nav-bar>
     </ion-header-bar>

my class:

.scrolling{
  background-color: red !important;
}

and code:

if ($ionicScrollDelegate.$getByHandle('contentScroll').getScrollPosition().top > 100) {       
     $scope.isActive = true;
} else {
    $scope.isActive = false;
}

Demo

http://virtual-host-discourse.global.ssl.fastly.net/uploads/ionicframework/optimized/2X/7/7fcbaa68a40008e90de10292d80559c3eb5e17bf_1_326x500.gif

like image 721
Luis Ruiz Figueroa Avatar asked Oct 31 '22 02:10

Luis Ruiz Figueroa


1 Answers

my assumption is that the digest loop is not processed when you affect $scope.isActive.

Try to wrap it into a $timeout (don't forget to add $timeout as a dependency)

if ($ionicScrollDelegate.$getByHandle('contentScroll').getScrollPosition().top > 100) {       
  $timeout(function(){
     $scope.isActive = true;
  },0)
} else {
  $timeout(function(){
    $scope.isActive = false;
  },0)
}
like image 190
aorfevre Avatar answered Nov 08 '22 11:11

aorfevre