Angularjs - 无法根据滚动位置显示/隐藏元素

Question

我试图显示一个箭头图标，用作“转到顶部”按钮，但仅在用户完成一些滚动之后。该代码过去使用jquery工作得很好，但我很难使用Angular达到相同的效果。目前，箭头始终显示在屏幕的右下角。

JSfiddle here .

JS:

var myApp = angular.module('app',[]);

myApp.controller('ctrl', ['$scope', function($scope) {
     //detect scroll
    $(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
        console.log(scroll);
        if(scroll>500 || scroll==undefined){
            $scope.showUpArrow = false;
        }else{
            $scope.showUpArrow = true;
        }
    });
}]);

HTML:

<div ng-app="app">
  <div ng-controller="ctrl">
    <div ng-hide="showUpArrow" id="goUp-cont">
      <a href="#top"><i class="fa fa-arrow-up fa-4x" id="goUp"></i></a>
    </div>
  </div>
</div>

Answer 1

你需要手动 $apply() (或 $digest())你的范围，因为你在 jquery 处理程序中，所以基本上在 Angular 循环之外。

myApp.controller('ctrl', ['$scope', function($scope) {
     //detect scroll
    $(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
        console.log(scroll);
        if(scroll>500 || scroll==undefined){
            $scope.showUpArrow = false;
        }else{
            $scope.showUpArrow = true;
        }
        **$scope.$apply();**
    });
}]);

应该基本上可以解决你的问题

为了避免每个滚动事件在大多数情况下无用的情况下进行昂贵的消化周期，您还应该检查 showUpArrow 的初始值，仅在值更改时才触发摘要周期:

myApp.controller('ctrl', ['$scope', function($scope) {
     //detect scroll
    $(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    var oldState = $scope.showUpArrow;
        console.log(scroll);
        if(scroll>500 || scroll==undefined){
            $scope.showUpArrow = false;
        }else{
            $scope.showUpArrow = true;
        }
        if($scope.showUpArrow !== oldState) {
            $scope.$apply();
        }
    });
}]);