angularjs - 无限滚动不启用滚动首先导致 Angular js

Question

我在 div 上使用了无限滚动，如下所示

<div ng-app='myApp' ng-controller='DemoController'>
  <div id="scroll" infinite-scroll='reddit.nextPage()' 
  infinite-scroll-disabled='reddit.stopscript'   infinite-scroll-distance='2'   
    style="height:500px;overflow-y:scroll; border:solid 1px black">             

  <div ng-repeat='item in reddit.items'>
      <span>{{item.CourseId}}</span>
      <span>{{item.Name}}</span>
  </div>
<div ng-show='reddit.busy'>Loading data...</div>

我的 Controller 代码是

var myApp = angular.module('myApp', ['infinite-scroll']);

 myApp.controller('DemoController', function ($scope, Reddit) {
$scope.reddit = new Reddit();
});

 // Reddit constructor function to encapsulate HTTP and pagination logic
    myApp.factory('Reddit', function ($http) {
   var Reddit = function () {
    this.items = [];
    this.busy = false;
    this.after = '';
    this.counter = 30;
    this.index = 0;
    this.stopscript = false;
};

Reddit.prototype.nextPage = function () {
    if (this.busy) return;
    this.busy = true;

    var url = "http://byui.demo.emsicareercoach.com/packets/coursesearch/?Limit=" +         this.counter + "&Offset=" + this.index + "&Search=&x-ResponseType=json&x-Password=944c8e5971db726e0a516f3c6fa2eb922c5a79bb732975421b7f2bf52acce51f";
    $http.get(url).success(function (data) {

        if (data.Results.length == 0) {

            this.stopscript = true;
        }
        else {               
            this.items.push.apply(this.items, data.Results);
            this.index = this.index + this.counter;              
        }
        this.busy = false;
    }.bind(this));
};

return Reddit;

});

这在我的浏览器最小化时工作正常，但当我的浏览器最大化时它显示前三十条记录然后它不会再次点击该 ajax 调用函数。我使用了 infinite-scroll-distance='2' 甚至给了我的 div 高度，但它仍然没有在最大化的网页上显示滚动因此无法正常工作。请帮助

Answer 1

您必须定义infinite-scroll-container，否则它将始终检查到浏览器窗口底部的距离。

将 HTML 更改为如下内容:

<div id="scroll" infinite-scroll='reddit.nextPage()'
     infinite-scroll-container="'#scroll'"
     infinite-scroll-disabled='reddit.stopscript' 
     infinite-scroll-distance='2'   
     style="height:500px;overflow-y:scroll; border:solid 1px black">

其中 '#scroll' 是包含可滚动内容的 div 的 ID。

检查这个plunker

重要通知:此功能未包含在最新的稳定版本 (v1.0.0) 中，仅在最新的开发(主)版本中可用。