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

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

这是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;
        });
    };
}]);

谢谢