angularjs - 我在 AngularJS 中的双向无限滚动有什么问题？

Question

我为使用 AngularJS 构建的移动 Web 应用程序构建了一个无限滚动，具有以下附加功能:

我将其构建为双向

这是针对移动 Web 应用程序的，所以我希望它卸载 View 外的内容以避免内存问题

这里是 jsfiddle关联。

现在，我有几个问题，我还需要一个小的代码审查:

我不熟悉promise，但是then()似乎在 $digest 之前执行.因此，我需要使用 $timeout 延迟我的代码.对我来说，这是出现问题的迹象。我想删除 $timeout在第 85 和 98 行。$timeout第 85 行有点“hacky”，我需要确保它在 then() 之后执行 ms否则，它将不起作用，我不知道为什么。

我想知道调用 $scope 是否被认为是一种“良好做法”。来自指令的方法。在我的代码中，我正在调用 $scope.init(value)根据我的指示。

包括用于 position() 的 jQuery很有趣。我应该使用具有功能的服务吗$.position()做？

我知道这些可能是单独的问题，但它们确实与我的代码有关。

对于那些不想点击 jsfiddle的人链接，代码如下:

HTML:

<div id="fixed" scroll-watch="4" scroll-up="loadTop()" scroll-down="loadBottom()">
    <ul>
        <li data-id="{{i.id}}" ng-repeat="i in items" ng-class="calculateType(i.id)">{{i.id}}</li>
    </ul>
</div>

JS:

function Main($scope, $timeout, $q) {
    var cleanup = 5;

    $scope.items = [];

    //This is called from the scrollWatch directive. IMO, this shouldn't be a good idea
    $scope.init = function(value) {
        var deferred = $q.defer();

        //This $timeout is used to simulate an Ajax call so I will keep it there
        $timeout(function() {
            $scope.items = [{id: +value}];

            $scope.loadTop();
            $scope.loadBottom();

            deferred.resolve();
        }, 200);

        return deferred.promise;
    };

    //This is only used to simulate different content's heights
    $scope.calculateType = function(type) {
        return 'type-' + Math.abs(type) % 4;  
    };

    $scope.loadBottom = function() {
        var deferred = $q.defer(),
            counter;

        if ($scope.items.length > 1) {
            $scope.items.splice(0, cleanup);
        }

        //This $timeout is used to simulate an Ajax call so I will keep it there
        $timeout(function() {
            counter = (($scope.items[$scope.items.length - 1]) || {id: 0}).id;

            for (var i = 1; i < 6; i++) {
                $scope.items.push({id: counter + i});
            }

            deferred.resolve();
        }, 200);

        return deferred.promise;
    };

    $scope.loadTop = function() {
        var deferred = $q.defer(),
            counter;

        //Why can't I use this here?
        //$scope.items.splice($scope.items.length-cleanup, $scope.items.length);

        //This $timeout is used to simulate an Ajax call so I will keep it there
        $timeout(function() {
            counter = (($scope.items[0]) || {id: 0}).id;

            for (var i = 1; i < 6; i++) {
                $scope.items.unshift({id: counter - i});
            }

            deferred.resolve();
        }, 200);

        return deferred.promise;
    };

    //Why is this method needs to be delayed inside the directive? I would like to call it in loadTop()
    $scope.removeBottom = function() {
        $scope.items.splice($scope.items.length-cleanup, $scope.items.length);
    };
}

angular.module('scroll', []).directive('scrollWatch', ['$timeout', function($timeout) {
    var lastScrollTop = 0;

    return function($scope, elm, attr) {
        var raw = elm[0];

        $scope.init(attr.scrollWatch).then(function() {
            //Why do I need this? It looks like the resolve is called before the $digest cycle
            $timeout(function() {
                raw.scrollTop = $('li[data-id="' + attr.scrollWatch + '"]').position().top;
            }, 300); //This value needs to be great enough so it is executed after the $scope.loadTop()'s resolve, for now, I know that I can set it to 300 but in real life app?
        });

        elm.bind('scroll', function() {
            if (raw.scrollTop > lastScrollTop && raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                $scope.$apply(attr.scrollDown);
            } else if (raw.scrollTop < lastScrollTop && raw.scrollTop === 0) {
                var scrollHeight = raw.scrollHeight;

                $scope.$apply(attr.scrollUp).then(function() {
                    //Why do I need this? It looks like the resolve is called before the $digest cycle
                    $timeout(function() {
                        raw.scrollTop = raw.scrollHeight - scrollHeight;

                        //I would like to move this in the $scope.loadTop()
                        $scope.removeBottom();
                    });
                });
            }

            lastScrollTop = raw.scrollTop;
        });
    };
}]);

谢谢

Answer 1

http://www.youtube.com/watch?v=o84ryzNp36Q
是一个关于 Promises 的很​​棒的视频，如何编写它们以及它们是如何工作的。

https://github.com/stackfull/angular-virtual-scroll
是 ng-repeat 的指令替代品，它不会加载任何不在屏幕上的内容它可以从我可以确切地知道您正在寻找的内容中进行。

我会将此作为评论，但您需要 50 信用或声誉或他们所说的任何东西。