Angular $ watch window.pageYOffset沒有更新？

Question

在我的控制器中，我有：

$scope.woffset = window.pageYOffset;

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

因此，當我滾動時，我應該在pageYOffset更改時接收“hello”的控制台日志。 但是，它沒有做任何事情。 但是如果我在向下滾動時在控制台中運行window.pageYOffset，我可以看到值正在改變。 有任何想法嗎？

我嘗試了多種手表變化（有和沒有真，使用函數而不是字符串，但似乎沒有任何工作）。

（我知道有一個關於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問題來了解這樣做我可以使用_lodash去抖動或限制AngularJS中的觀察<input>嗎？

這有一個問題是，即使控制器被垃圾收集，它也永遠不會看不到滾動。 要解決此問題，還請執行以下操作：

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

Answer 2

驗證的一件好事是你的window.pageYOffset值實際上正在改變。 滾動窗口然后在控制台中執行window.pageYOffset以驗證它是否正在更改。 可能是您正在滾動子容器而不是窗口，因此您沒有看到任何更改。

Answer 3

angular.element($window).on("scroll resize", function (e) {
console.log($window.pageYOffset)
});

scope.$on('$destroy', function () {
angular.element($window).unbind("scroll resize");
});