Question

延迟此指令运行的最佳方法是什么？在指令执行之前需要等待的状态之间有一个小的延迟，否则它会弄乱滚动。我试图使用$timeout但似乎错误地使用它，因为它会抛出错误......

app.directive('scrolltop', function() {
    return {
        restrict: 'A',
        link: function(scope, element) {
            element.on('click', function() {
                console.log('scrolltop');
                $('html, body').animate({
                    scrollTop: $(element).offset().top - 50
                }, 2000);
            });
        },
    }
});

Answer 1

我使用$timeout写了一个简单的例子（向下滚动div并点击背景）。

HTML：

<div ng-app="TestDebounce">
    <div scrolltop class="scrolltop">
        <span>...</span>
    </div>
</div>

Angular指令：

(function() {
    angular.module('TestDebounce', []).directive('scrolltop', scrolltop);
    scrolltop.$inject = ['$timeout'];

    function scrolltop($timeout) {
        return {
            restrict: 'AE',
            link: linkFunction
        }

        function linkFunction(scope, element) {
            element.on('click', function() {
                $timeout(function() {
                    $('html, body').animate({
                        scrollTop: $(element).offset().top - 50
                    }, 'fast');
                }, 2000); // 2 seconds timeout
            });
        }
    }

}());

JS小提琴link - 尝试一下。

延迟角度指令执行

1 个答案: