Thay đổi CSS không được áp dụng ngay lập tức

Question

để hạ đầu nên thay đổi màu sắc, nhưng thay đổi không được nhìn thấy, nếu tôi mở menu chỉ thì thay đổi có thể được nhìn thấy.

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

lớp học của tôi:

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

và mã:

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

Answer 1

giả định của tôi là tiêu hóa vòng lặp không được xử lý whe n bạn ảnh hưởng đến $scope.isActive.

Cố gắng quấn nó thành một $timeout (đừng quên để thêm $timeout như một sự phụ thuộc)

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