javascript - Angular $watch window.pageYOffset 没有更新？

Question

在我的 Controller 中，我有:

$scope.woffset = window.pageYOffset;

 $scope.$watch("woffset", function (newValue, oldValue) {
    console.log("hello");
    console.log(window.pageYOffset);
 }, true);
});

因此，当我滚动时，随着 pageYOffset 的更改，我应该会收到“hello”的控制台日志。但是，它什么都不做。但是，如果我在向下滚动时在控制台中运行 window.pageYOffset，我可以看到该值正在发生变化。有什么想法吗？

我尝试了 watch 的多种变体(有和没有 true，使用函数而不是字符串，但似乎没有任何效果)。

(我知道可以使用 onscroll 解决问题，但我想了解它如何以这种方式工作)谢谢!

编辑:这似乎也不起作用:

$scope.test = function () { 
    return window.pageYOffset;
}

$scope.$watch("test", function (newValue, oldValue) {
console.log("hello");
console.log(window.pageYOffset);
}, true);

Answer 1

问题是 $scope.woffset 被设置为正常数字 - 它永远不会改变。这就像执行以下操作:

var i = 5;
var j = i;

i = 7;
// Wondering here why j isn't 7

有两种方法可以解决您的问题 - 朴素的方法或更有效的方法。

首先:

window.onscroll = function () {
    console.log("hello");
    console.log(window.pageYOffset);
    // any $scope variable updates
    $scope.$digest();
};

但是，使用此解决方案，每次滚动时都会疯狂运行。更有效的方法是将上述解决方案与一些“去抖动”结合使用——查看这个 Stack Overflow 问题以了解如何做 Can I debounce or throttle a watched <input> in AngularJS using _lodash?

这有一个问题是它永远不会取消观看滚动，即使在 Controller 被垃圾回收后也是如此。要解决此问题，还要执行以下操作:

$scope.$on('$destroy', function() {
    window.onscroll = null;
});