Angular и получение позиции прокрутки окна в контроллере

У меня возникли проблемы с пониманием того, как получить положение прокрутки окна внутри моего контроллера, поэтому я могу построить вокруг него логику.

Из всех вопросов и ответов, которые я читал, наиболее приемлемый ответ, похоже, заключается в написании директивы, которая вычисляет положение прокрутки, прикрепляет эту директиву к элементу и что она.

Однако, если вы хотите сделать что-то по строкам:

if (scrollY > 100 ){
 $scope.showMenu = true;
}
if (scrollY > 500) {
 $scope.showFooter = true;
}

Этот подход, похоже, не работает, потому что вычисленное положение в директиве невозможно получить из контроллера. Каким будет правильный способ "Angular", который все равно позволит выполнить несколько более сложную логику с контроллера?

2 ответа

В соответствии с комментарием @RobKohr, здесь оптимизированный подход с использованием .on('scroll') и $scope.$apply для обновления элемента области прокрутки.

$document.on('scroll', function() {
 // do your things like logging the Y-axis
 console.log($window.scrollY);
 // or pass this to the scope
 $scope.$apply(function() {
 $scope.pixelsScrolled = $window.scrollY;
 })
});


Внесите службу $window в ваш контроллер, который представляет собой просто оболочку вокруг объекта window браузера, и у вас есть свойства $window.scrollX и $window.scrollY.

Если вы хотите отреагировать на изменения прокрутки, поставьте на них часы:

$scope.$watch(function () {
 return $window.scrollY;
}, function (scrollY) {
 /* logic */
});

licensed under cc by-sa 3.0 with attribution.