AngularJS并在控制器中获取窗口滚动位置

Question

我在理解如何在我的控制器中获取窗口的滚动位置时遇到一些麻烦,因此我可以围绕它构建逻辑.

从我一直在阅读的所有问题和答案中,最常被接受的答案似乎是编写一个计算滚动位置的指令,将该指令粘贴在一个元素上,就是这样.

但是,当你想要做的事情是:

if (scrollY > 100 ){
  $scope.showMenu = true;
}

if (scrollY > 500) {
  $scope.showFooter = true;
}

这种方法似乎不起作用,因为无法从控制器访问指令中的计算位置.什么是正确的'Angular'方式,这仍然允许从控制器执行稍微复杂的逻辑？

Answer 1

根据@RobKohr评论,这是一个使用.on('scroll')和$scope.$apply更新滚动范围元素的优化方法.

$document.on('scroll', function() {
    // do your things like logging the Y-axis
    console.log($window.scrollY);

    // or pass this to the scope
    $scope.$apply(function() {
        $scope.pixelsScrolled = $window.scrollY;
    })
});

Answer 2

将$window服务注入您的控制器,它只是浏览器window对象的包装器,并且您具有$window.scrollX和$window.scrollY属性.

如果您想要回复滚动中的更改,请将手表放在上面:

$scope.$watch(function () {
    return $window.scrollY;
}, function (scrollY) {
    /* logic */
});