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沒有更新？

回答

相關問題