AngularJS и получение положения прокрутки окна в контроллере

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

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

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

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

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

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

Ответы

Ответ 1

В соответствии с комментарием @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;
    })
});

Ответ 2

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

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

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

Ответ 3

В принятом ответе отсутствует код разрыва:

ОШИБКА (отсутствует разрыв)

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

Чтобы избежать утечек памяти и других нежелательных действий, код должен выполнять надлежащее разложение, когда $scope уничтожается.

$document.on('scroll', scrollHandler);

$scope.$on("$destroy", function() {
    $document.off('scroll', scrollHandler);
});

function scrollHandler(ev) {
    // 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;
    });
}