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

但是，使用此解决方案，每次滚动时都会疯狂地运行。更有效的方法是使用上述解决方案结合一些＆＃34;去抖动＆＃34; - 查看此Stack Overflow问题，了解如何执行Can I debounce or throttle a watched <input> in AngularJS using _lodash?

这有一个问题是，即使控制器被垃圾收集，它也永远不会取消观看滚动。要解决此问题，请执行以下操作：

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

Angular $ watch window.pageYOffset没有更新？

3 个答案: