不使用Ajax的Javascript动态内容加载

Question

我有一组新闻文章列表要显示在前端。但是我只想显示前五个。当用户滚动到div的末尾附近（而不是底端，因为我有默认的页脚）时，它将再填充另外5个，依此类推。 我正在使用angularjs limitTo控制要显示多少新文章。

使用我拥有的代码，滚动到div的末尾时，滚动时将加载很多新文章（超过5条），并且在移动视图中无法正常工作。任何人都可以教我如何在我像YouTube页面一样滚动时加载内容，除非不一直滚动到最后一列数据数组。

<div ng-repeat="news in ctrl.newsList | limitTo:ctrl.displayLimit">

var ctrl.displayLimit = 5;
$(window).scroll(function() {
  if ($(window).scrollTop() >= $(document).height() - $(window).height() - 300) {
    if (ctrl.newsList.length > ctrl.displayLimit) {
      ctrl.displayLimit = ctrl.displayLimit + 5;
    }
  }
});