Question

我希望用户在点击某个按钮时能够顺畅地滚动到页面顶部。我使用jQuery的.animate。但是，无论我尝试什么，Angular warns me我都无法访问范围之外的DOM元素。

这就是我的尝试：

模板：

<button ng-click="action()">

控制器：

$('html, body').animate({ scrollTop: 0 }, 'slow')

这有效，但Angular会给出错误。

有人想过如何以正确的方式做到这一点吗？

Answer 1

在您的控制器上，只需继续仅提供有关操作的信息，而不是滚动信息。滚动是一种增强功能：

$scope.buttonAction = function () {
    console.log('button action');
}

在您的视图中正常使用按钮，但现在为其添加指令以添加其他滚动行为：

<button scrollup ng-click="buttonAction()">Click me</button>

最后你的滚动内容应该在那个scrollup指令中：

app.directive('scrollup', function ($document) {
        return {
            restrict: 'A',
            link: function (scope, elm, attrs) {
                elm.bind("click", function () {

                    // Maybe abstract this out in an animation service:
                    // Ofcourse you can replace all this with the jQ 
                    // syntax you have above if you are using jQ
                    function scrollToTop(element, to, duration) {
                        if (duration < 0) return;
                        var difference = to - element.scrollTop;
                        var perTick = difference / duration * 10;

                        setTimeout(function () {
                            element.scrollTop = element.scrollTop + perTick;
                            scrollToTop(element, to, duration - 10);
                        }, 10);
                    }

                    // then just add dependency and call it
                    scrollToTop($document[0].body, 0, 400);
                });
            }
        };
});

现在，您可以在控制器中添加所需的任何操作，但也可以通过添加指令来实现跳跃性行为。

Answer 2

为什么不滚动到element工作的scope的顶部？如果您有类似

的内容

<div ng-controller="SomeCtrl">
    …
</div>

在控制器中：

app.controller('SomeCtrl', ['$scope', '$element', function ($scope, $element) {
    $($element).animate(…);
}]);

Angular：使用jquery animate滚动到顶部

2 个答案: