在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>   

和anular 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＆amp;只需要一个简单的样本就可以script。

演示的主script在coffeescript中，这是演示的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，我为您提供了一个示例，用于显示从json文件获取数据的示例。