在 div 内向上滚动时无限滚动

Question

我正在使用 AngularJS 和 Laravel 构建一个聊天系统。

我想使用 AngularJS 在 div 容器中创建一个无限滚动条。我想要的是一个聊天框，当用户点击用户名时，它将显示最后 30 条聊天消息；当用户在容器（而不是浏览器窗口）中向上滚动时，我想运行一个 AJAX 请求并获取之前的 30 条记录，就像我们在 facebook 聊天应用程序中所做的那样。

这是我的 HTML 代码：

<ul class="chats" ng-repeat="chatData in DataChats">
    <li>
        <div class="message">
            <a> {{chatData.sender_fname }} </a>
            <span class="body"> {{chatData.message }} </span>
        </div>
    </li>
</ul>   

和循环js代码

$scope.showChat = function(chat_id) {
    $http.get(url+'/chat/'+chat_id).success(function(data){
        $scope.DataChats= data;
    });
}   

我已经搜索了 AngularJS 的依赖项，但我只为像 Ng infinite scroll 这样的浏览器找到了这个。我怎样才能把容器变成一个 Facebook like chat when we scroll up and it shows previous messages?

这就是我想要实现的目标：

Answer 1

ngInfiniteScroll 也支持容器无限滚动（ref），但我推荐使用ui-scroll。它有更多的能力。 This 也会回答你的问题。

您可以使用ui-scroll-viewport 为容器使用ui-scroll。

<ANY ui-scroll-viewport>
      ...
</ANY>

这个demo 和html 和script 的源代码就是你所需要的一个简单的示例。

demo的主要script在coffeescript中，这里是demo的javascript代码：

angular.module('application', ['ui.scroll', 'ui.scroll.jqlite']).factory('datasource', [
  '$log', '$timeout', function (console, $timeout) {
      var get;
      get = function (index, count, success) {
          return $timeout(function () {

              result = [];
              var i = index;
              for (i; i < index + count - 1 ;i++ ) {
                  result.push("item #" + i);
              }
              return success(result);
          }, 100);
      };
      return {
          get: get
      };
  }
]);
angular.bootstrap(document, ["application"]);

正如文档中提到的，您所要做的就是实现get 函数。

here ，我为您提供了一个 plunker 来展示从 json 文件中获取数据的示例。