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

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

我建造它是为了双向的

这是一个移动web应用程序，所以我希望它卸载视图外的内容，以避免内存问题

这里是链接

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

我不熟悉承诺，但是

then（）

似乎是在

$digest

之前执行的。因此，我需要使用

$timeout

延迟代码。对我来说，这是有问题的迹象。我想删除第85行和第98行的

$timeout

。第85行的

$timeout

有点“黑”，我需要确保它在

then（）

之后毫秒执行，否则，它将无法工作，我不知道为什么

我想知道从指令中调用

$scope

方法是否被视为“良好实践”。在我的代码中，我从指令调用

$scope.init（value）

将jQuery包含在

位置（）

中非常有趣。我应该使用一个带有函数的服务来完成

$.position（）

的功能吗

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

对于不想点击链接的用户，以下是代码：

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>

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

{{i.id}

JS:

<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>

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

function Main（$scope，$timeout，$q）{
var=5；
$scope.items=[]；
//这是从scrollWatch指令调用的。依我看，这不是个好主意
$scope.init=函数（值）{
var deferred=$q.deferred（）；
//这个$timeout用于模拟Ajax调用，所以我将把它保留在那里
$timeout（函数（）{
$scope.items=[{id:+value}]；
$scope.loadTop（）；
$scope.loadBottom（）；
延迟。解决（）；
}, 200);
回报。承诺；
};
//这仅用于模拟不同内容的高度
$scope.calculateType=函数（类型）{
返回'type-'+Math.abs（type）%4；
};
$scope.loadBottom=函数（）{
var deferred=$q.deferred（），
柜台
如果（$scope.items.length>1）{
$scope.items.splice（0，清理）；
}
//这个$timeout用于模拟Ajax调用，所以我将把它保留在那里
$timeout（函数（）{
计数器=（$scope.items[$scope.items.length-1]）|{id:0}）.id；
对于（变量i=1；i<6；i++）{
$scope.items.push（{id:counter+i}）；
}
延迟。解决（）；
}, 200);
回报。承诺；
};
$scope.loadTop=函数（）{
var deferred=$q.deferred（），
柜台
//为什么我不能在这里用这个？
//$scope.items.splice（$scope.items.length-cleanup，$scope.items.length）；
//这个$timeout用于模拟Ajax调用，所以我将把它保留在那里
$timeout（函数（）{
计数器=（$scope.items[0]）|{id:0}）.id；
对于（变量i=1；i<6；i++）{
$scope.items.unshift（{id:counter-i}）；
}
延迟。解决（）；
}, 200);
回报。承诺；
};
//为什么这个方法需要在指令中延迟？我想在loadTop（）中调用它
$scope.removebooth=函数（）{
$scope.items.splice（$scope.items.length-cleanup，$scope.items.length）；
};
}
angular.module（'scroll'，[]）指令（'scrollWatch'，['$timeout'，函数（$timeout）{
var lastScrollTop=0；
返回函数（$scope、elm、attr）{
var raw=elm[0]；
$scope.init（attr.scrollWatch）.then（function（）{
//为什么我需要这个？看起来解析是在$digest循环之前调用的
$timeout（函数（）{
raw.scrollTop=$（'li[data id=“”+attr.scrollWatch+“]”）位置（）.top；
}，300）；//这个值必须足够大，才能在$scope.loadTop（）解析后执行，现在，我知道我可以将它设置为300，但在实际应用中？
});
elm.bind（'scroll'，function（）{
如果（raw.scrollTop>lastScrollTop&&raw.scrollTop+raw.offsetHeight>=raw.scrollHeight）{
$scope.$apply（属性向下滚动）；
}else if（raw.scrollTop

谢谢

这是一个关于承诺、如何写承诺以及如何工作的精彩视频

是ng repeat的一个指令替代品，它不加载任何不在屏幕上的内容，我可以准确地告诉你要找什么

---

我会将此作为一个评论，但您需要50个信誉或声誉，或其他他们称之为的东西。

只需拨打$scope。$在您解决承诺之前消化一下自己：。我认为$timeout在执行回调后调用$digest。