在离子上滚动的角度改变样式

Question

我已经设置了页面上后退箭头的背景变化。当我向下滚动，然后它会改变背景时它工作正常，但它在我滚回到顶部后不起作用，它不会变回透明背景。在模拟器和真实设备上测试后，我发现它只能在浏览器中工作，而不能在任何其他平台上工作。

这是我的看法：

<div class="back-arrow" style="background-color: {{ background }};"> 
    <a class="button button-icon icon ion-chevron-left" ui-sref="main.front"> 
    </a> 
</div> 

<ion-content on-scroll="changeArrowBackground()"> 
    ...code... 
</ion-content> 

这是我的控制器：

$scope.changeArrowBackground = function(){ 
    console.log($ionicScrollDelegate.getScrollPosition().top == 0); 
    if ($ionicScrollDelegate.getScrollPosition().top == 0) { 
     console.log('transparent'); 
     $scope.background = "transparent"; 
    } 
    else { 
     console.log('not-transparent'); 
     $scope.background = "#353A41"; 
    } 
} 

每当我把它的滚动原木的基础上正确的位置。

Answer 1

它可能不会触发角度周期。试着用$scope.$apply()来强制它。

$scope.changeArrowBackground = function(){ 
    if ($ionicScrollDelegate.getScrollPosition().top == 0) { 
     $scope.background = "transparent"; 
    } else { 
     $scope.background = "#353A41"; 
    } 
    $scope.$apply(); 
}