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

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

>我把它建成双向的
>这是一个移动网络应用程序,所以我希望它卸载视图内容,以避免内存问题

这是jsfiddle链接.

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

>我不熟悉promises,但是然后()似乎在$digest之前执行.因此,我需要使用$timeout延迟我的代码.对我而言,这表明出现了问题.我想在第85行和第98行删除$timeout.第85行的$timeout有点“hacky”,我需要确保它在ms之后被执行(否则,它将无效并且我不会不知道为什么.
>我想知道从指令调用$scope方法是否被认为是一种“好习惯”.在我的代码中,我从我的指令调用$scope.init(value).
>包含jQuery for position()非常有趣.我应该使用具有$.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;
        });
    };
}]);

谢谢

解决方法

http://www.youtube.com/watch?v=o84ryzNp36Q
是关于Promises的精彩视频,如何编写它们以及它们如何工作.

https://github.com/stackfull/angular-virtual-scroll
是ng-repeat的指令替代,它不会加载任何不在屏幕上的内容它可以从我能确切地告诉你的内容.

我会把它作为评论,但你需要50信誉或声誉或他们称之为的任何东西.