Я пытаюсь сделать бесконечно-прокручиваемую таблицу. У меня есть:
<tr ng-repeat="x in names | limitTo:quantity">
<td>{{ x.Density }}</td>
<td>{{ x.Pressure }}</td>
<tr>
В конце таблицы у меня есть кнопка больше загрузки. Это работает нормально:
<button class="btn" ng-click="loadMore()">Load more</button>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('customersCtrl', function($scope) {
$scope.quantity = 7;
$scope.loadMore = function () {
$scope.quantity += 7;
}
$scope.names = <?php echo json_encode($records); ?>;
});
</script>
Хотя это не имеет никакого эффекта:
window.onscroll = function () {
if($(window).scrollTop() + window.innerHeight == $(document).height()){
$scope.quantity += 7;
}
}
Самое странное, если я удаляю loadMore()
и использую только функцию window.onscroll
и сохраняю кнопку, она не показывает больше результата при прокрутке вниз, но начинает работать, если я нажму кнопку. Да, даже если у меня нет функции loadMore()
! Я уверен, что window.onscroll
$scope.quantity
внизу, потому что $scope.quantity
продолжает расти.
Я использую jQuery mobile, если это имеет какое-либо отношение к проблеме. Я не думаю, что это происходит, потому что он отлично работает при нажатии кнопки.
Как заставить эту работу работать только с функцией window.onscroll
?
Это потому, что ваш код onScroll
не запущен внутри углового дайджеста, что обнаруживает изменения и обновления просмотров, уведомляет наблюдателей и т.д....
Вы должны поместить логику onscroll
внутри директивы и сделать что-то вроде этого: qaru.site/questions/99268/...