Question

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

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

但是，当你想要做的事情是：

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

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

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

Answer 1

根据@RobKohr评论，这是使用xxd -i和.on('scroll')更新滚动范围元素的优化方法。

$scope.$apply

Answer 2

将$window服务注入您的控制器，这只是浏览器window对象的包装器，您拥有$window.scrollX和$window.scrollY属性。

如果你想回应滚动的变化，请注意它们：

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

Answer 3

接受的答案缺少拆卸代码：

错误（缺少拆卸）

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

为避免内存泄漏和其他不良行为，在$scope被销毁时，代码需要进行适当的拆除。

$document.on('scroll', scrollHandler);

$scope.$on("$destroy", function() {
    $document.off('scroll', scrollHandler);
});

function scrollHandler(ev) {
    // 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;
    });
}

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

3 个答案: