滚动时无限滚动，销毁和重新创建元素

Question

我知道这可能是一个很受欢迎的问题，但我想专门针对我的问题向专家征求意见。

我的网页代表一个具有无限滚动的树（意为植被），例如树的中间部分 - 图像，是迭代的，迭代次数取决于我的数据源。

因此，数据源是用户记录，将在树上表示为叶子。树的每个中间部分都有return abs(res); 个叶子，每个叶子有n个ajax监听器：

我知道我可以在用户向下滚动时将元素附加到我的容器中，但问题是即使列表顶部的行在滚出视图时变得不可见，它们仍然是页面的一部分，仍然消耗资源。因此，Web应用程序速度变慢，听众可能无法正常工作。

我正在寻找任何动态销毁元素的插件，因为它们变得不可见，并在它们再次可见时重新创建它们。

我差不多找到了解决方案angular ui-scroll directive，但不确定如何应用它。这是codepen，您的叉子将受到高度赞赏。

我的页面现在正在运行，没有动态加载：

onClick

Answer 1

设置一个服务，该服务在调用时返回您需要的数据，而不是预先渲染它，这将是理想的选择。 Their service demo提供get函数，你应该用$http调用你的服务器替换这个get函数，让它只返回你需要的树块（有点像分页一样）响应）。

未经测试的例子就像是

angular.module('application', ['ui.scroll', 'ui.scroll.jqlite'])
    .factory('datasource', ['$http',
        function ($http) {

            var get = function(index, count, success){
                // gets data from /datasourceapi/tree/?index=XXX <-- XXX is the offset from the beginning
                return $http({
                    url:'/datasourceapi/tree/',
                    method: 'GET',
                    params:{index: index}
                }).then(function(response){
                    return success(response);
                });
            }

            return {
                get: get,
            };
        }
    ]);