Angularjs

Question

我试图显示一个箭头图标用作 "go to top" 按钮，但只有在用户完成一些滚动之后。该代码过去使用 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();
        }
    });
}]);

Answer 2

缺少呼叫 $scope.apply()：

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

看到它在 updated fiddle

上运行

关于为什么必须这样做的更多信息：例如here

Angularjs - 无法根据滚动位置 show/hide 元素

Angularjs - unable to show/hide element according to scroll location

ng-hide