如何将无限滚动添加到mean.js模块？

Question

我正在尝试将无限滚动添加到mean.js的演示文章模块中，这些模块开箱即用。

我使用ng install infinite-scroll安装了无限滚动，我可以看到该模块是可用的。

在list-articles.client.view.html页面中，我将指令添加到div list-group。

<div class="list-group" infinite-scroll="myPagingFunction()" infinite-scroll-distance="1">

我创建了这个myPagingFunction，所以只需要调用find()，并且我将查找限制为50个结果。我想我以后会担心这个函数的真正实现。

但是，我不知道如何让mean.js识别该指令。我尝试将无限滚动添加到config.js依赖项列表中。但之后我就在网站上看到了空白页面。

var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate', 'ui.router', 'ui.bootstrap', 'ui.utils','infinite-scroll'];

Answer 1

我能够解决这个问题。我发现ng-scroll已经是angular的一部分了。

在客户机视图中，我做了以下更改：

<div class="list-group" ng-scroll-viewport style="height: 70vh;">
    <a  ng-animate="'animate'" ng-scroll="article in datasource"  class="list-group-item" >

在控件中，我添加了datasource get方法。在这里，我需要处理滚动过顶部的问题。不确定这是否是100%正确的，但它似乎是有效的。我还必须将json结果集转换为对象数组，以便ng-scroll正常工作。

$scope.datasource = {
        get: function(index, count, success) {

           if (index>-10) {
            if (index < 1) index = 1;

              var arts = Arts.query({index: index, count: count, filter: $scope.q});
              var results = [];

              articles.$promise.then(function (data) {

                   for (var key in data) {
                       if (data[key].name) {
                        results .push(data[key]);
                       }
                   }
                   success(results);
              });

            } else {
                success([]);
            }

      }
     };

然后，我修改了服务器端控制器中的查询以执行.skip(req.query.index).limit(req.query.count).这会将结果集限制为需要填充视口的行。