延迟 Angular 指令执行

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 fiddle link - 试一试。

延迟 Angular 指令执行

Delaying Angular Directive Execution

angularjs

angular-directive