Question

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

我把它建成双向
这是针对移动网络应用，所以我希望它能够卸载视图内容以避免内存问题

以下是jsfiddle链接。

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

我不熟悉承诺，但then()似乎在$digest之前执行。因此，我需要使用$timeout延迟我的代码。对我而言，这表明出现了问题。我想删除第85行和第98行的$timeout。第85行的$timeout有点“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个信誉或声誉或他们称之为的任何东西。

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

1 个答案: