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已经是角度的一部分了。

在客户端视图中，我进行了以下更改：

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

在控件中我添加了数据源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）。这会将结果集限制为需要填充视口的行。

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

1 个答案: