В настоящее время в Angular я делаю http-запрос в новостной ленте JSON. Я инициирую HTTP-запрос при загрузке с помощью data-ng-init = "init()". Однако я хотел бы показать только одну статью и иметь бесконечный свиток. Другими словами, я хотел бы, чтобы другие статьи загружались, как только пользователь попадает в нижнюю часть каждой статьи.
Это мой текущий index.html
<section ng-app="sports" ng-controller="main" data-ng-init="init()">
<div ng-repeat="article in articles | limitTo:2">
<div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2">
<!-- <h3>{{ article.created }}</h3> -->
<h1>{{ article.title }}</h1>
<img class="images afkl-lazy-image" src="{{ article.thumbnail }}">
<p ng-bind-html=" article.body | html "></p>
</div>
</div>
</section>
И вот мой angularApp.js:
app.controller('main', function($scope, $http){
$scope.init = function(){
$http.get("/data")
.success(function(response) {
$scope.articles = [];
$.each(response.node,function(index,item){
$scope.articles.push(item);
})
$scope.articles.reverse();
});
}}
);
Я буду рядом, чтобы ответить на любые вопросы. Заранее спасибо!!
Вам просто нужно добавить прослушиватель прокрутки на страницу, поймать событие и загрузить больше данных на одну "страницу" за раз:
$scope.currentPage = 0;
$scope.loadPage = function(pageNum){
$http.get("/data?page=" + pageNum)
.success(function(response) {
$scope.currentPage = pageNum;
$.each(response.node,function(index,item){
$scope.articles.push(item);
})
});
}}
};
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
$scope.loadPage($scope.currentPage + 1);
}
};
Вы действительно должны вводить $ window-сервис и использовать его:
...controller('mycontroller', function($scope, $window) {
angular.element($window).bind("scroll", function() {
///check to see if you're at the bottom and call method to load data as above
});
});