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

【问题标题】：How do I add infinite-scroll to mean.js modules?如何将无限滚动添加到 mean.js 模块？
【发布时间】：2014-12-07 06:36:23
【问题描述】：

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

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

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

<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'];

【问题讨论】：

请内联与问题相关的代码或链接 jsfiddle/codepen 演示来重现问题。
你遇到了什么异常？
我没有收到任何错误。如果我尝试将“无限滚动”添加到 publis/config.js 文件，则该站点无法呈现。 var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate', 'ui.router', 'ui.bootstrap', 'ui.utils','infinite-scroll'];

标签： angularjs infinite-scroll

【解决方案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" >

在控件中我添加了数据源获取方法。在这里，我需要处理滚动到顶部的问题。不确定这是否 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)。这会将结果集限制为需要填充视口的行。

【讨论】：