Событие прокрутки не запускается внутри директивы - 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);
});
}
};
});
Затем изучите позиционирование элемента и другую логику.
Я надеюсь, что это поможет.