Angular $ watch window.pageYOffset没有更新？

在我的控制，我有：

$scope.woffset = window.pageYOffset; 

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

所以，当我滚动，我应该为pageYOffset变化接收的“你好”控制台日志。但是，它什么都不做。但是，如果我在控制台中运行window.pageYOffset并向下滚动，则可以看到值正在改变。有任何想法吗？

我已经尝试了多种变化的手表（有和没有真，使用函数而不是字符串，但似乎没有工作）。

（我知道有一个onscroll工作，但我想了解它是如何工作的这种方式）谢谢！

编辑：这似乎并没有工作，要么：

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

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

来源

2014-09-20 prophit

请问你有没有使用滚动事件的原因？ – 2014-09-20 02:08:23

问题是$scope.woffset被设置为一个正常的数字 - 它永远不会改变。这就像下面这样做：

var i = 5; 
var j = i; 

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

有2种方法可以解决你的问题 - 天真的方式或更有效的方式。

第一：

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

然而，这种解决方案，每次滚动这将是运行像疯了似的。更有效的方法是使用上面的解决方案结合一些“debouncing” - 检查这个堆栈溢出问题，了解如何做到这一点Can I debounce or throttle a watched <input> in AngularJS using _lodash?

这样做的一个问题是它永远不会无法观看滚动，即使一次控制器被垃圾收集。为了解决这个问题，必须执行以下操作：验证

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

来源

2014-09-20 02:11:07 jkjustjoshing

什么？你认为何时会触发'$ digest'？ – Gildor 2014-09-20 02:37:09

嗨，如我所说，我不想使用onscroll。原因有两个：1.我想了解如何使用pageYOffset和$ watch来完成此操作。但也window.onscroll似乎只能被调用一次（如果你有两个window.onscroll函数，只有第二个将工作），这不会为我的目的工作。 – prophit 2014-09-21 22:56:36

问题是$ watch只运行每个摘要循环。例如，当您在输入中更改文本时，AngularJS内部正在运行一个普通的javascript事件侦听器，并且在调用'$ scope。$ digest（）'的回调中。但是，AngularJS不会自动为'onscroll'事件做这件事，所以你必须自己调用'$ scope。$ digest（）'。 – jkjustjoshing 2014-09-22 18:27:06

一个好处是，你的window.pageYOffset值实际上是不断变化的。滚动窗口，然后在控制台中执行一个window.pageYOffset来验证它正在改变。这可能是因为你正在滚动一个子容器而不是窗口，所以你没有看到任何改变。

来源

2014-09-22 05:16:06

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

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

来源

2016-08-10 06:01:34

Angular $ watch window.pageYOffset没有更新？

回答

相关问题