Событие прокрутки не запускается внутри директивы - angular.js

У меня проблема. У меня есть директива для бесконечного прокрутки, где я слушаю событие scroll. Проблема в том, что событие прокрутки запускается только при привязке к $window:

angular.element($window).bind('scroll', function () {
  console.log('Gogo!'); //works!
});

element.bind('scroll', function () {
  console.log('Gogo!'); //doesn't work... :(((
});

Директива находится внутри ng-view Я нашел этот вопрос, очень похож на мою проблему - Привязка к событиям в директиве, которая находится внутри ng-view, не работает

Кто-нибудь знает, как это решить? Благодарю!

Моя директива:

directives.directive('scrolly', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var raw = element[0];

            element.bind('scroll', function () {
                if (raw.scrollTop + raw.offsetHeight > raw.scrollHeight) {
                    scope.$apply(attrs.scrolly);
                }
            });
        }
    };
});

Мой взгляд:

<ul class="items-wrap" scrolly="showMore()">
   <li class="item" ng-repeat="item in items">{{item.name}}</li>
</ul>

Ответ 1

Я создал для вас скрипку: http://jsfiddle.net/ADukg/4831/

Интересно, что я использовал ваш точный код, и все, кажется, срабатывает нормально (см. все засоленные вызовы console.log()). Я подозреваю, что ваша проблема связана с вашим стилем CSS, хотя, без правильного использования переполнения, я не мог заставить событие прокрутки запускаться.

Ответ 2

Вероятно, потому что элемент, с которым вы привязываетесь, не "прокручивается".

node, который вы на самом деле прокручиваете (документ или, возможно, div с переполнением прокрутки) - это то, что на самом деле запускает событие.

Попробуйте ввести $document в свою директиву и настройте событие прокрутки на это:

$document.bind('scroll', function (){});

Кроме того, выровняйте оператор if внутри обработчика, пока не убедитесь, что у вас правильно активировано событие, затем добавьте его обратно.

Просто для начала:

app.directive('scrolly', function ($document) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {

            $document.bind('scroll', function () {
                scope.$apply(attrs.scrolly);
            });
        }
    };
});

Затем изучите позиционирование элемента и другую логику.

Я надеюсь, что это поможет.