Question

我刚刚发现我可以使用ui-router导航到锚点，方法是设置我的链接：

<ul>
    <li><a ui-sref="home({ '#': 'creative' })">creative</a></li>
    <li><a ui-sref="home({ '#': 'work' })">work</a></li>
    <li><a ui-sref="home({ '#': 'contact' })">contact</a></li>
</ul>

虽然这很棒，但我想动画到锚位置。我想我可以使用其中一个状态事件，所以我尝试了这个：

$transitions.onFinish({ to: true }, function () {

    console.log('the state has changed');

    console.log($location.hash());
    var hash = $location.hash();

    if (hash) {
        var target = document.querySelector('#' + hash);

        console.log(target);

        var element = angular.element(target);

        console.log(element);

        $document.scrollToElement(element, 0, 2000);
    } else {

        // Scroll to the top of the page
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    }
});

但视图尚未加载，因此该元素无法找到。如果有办法动画我的scrollTo？

Answer 1

主要思想是适时添加此动画。适当的时刻将是您的视图将被加载和编译。我们怎样才能100％确定视图是否已加载和编译？向视图添加指令！

当视图准备就绪时，将初始化指令，您可以将动画绑定到元素。就是这样。

Answer 2

维塔利是对的，创造一个指令是要走的路。我只是这样做了：

angular.module('directives').directive('autoscroll', directive);

function directive($document, $location) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var offset = attrs.offset || 0;
            var duration = attrs.duration || 2000;              

            scope.$watch(function () {
                return $location.hash();
            }, function (hash) {
                if (hash) {
                    var anchor = document.querySelector('#' + hash);
                    var target = angular.element(anchor);
                    $document.scrollToElement(target, offset, duration);
                } else {
                    // Scroll to the top of the page if no hash has been supplied
                    document.body.scrollTop = document.documentElement.scrollTop = 0;
                }
            });
        }

    };
};

在实际的视图模板文件（使用目标ID）上使用它并且它可以工作。

angularjs ui-router动画滚动到锚点

2 个答案: