Question

我试图在这个类似的问题How to handle anchor hash linking in AngularJS中调整答案。我需要能够与ui-router一起使用它。我已经在我的控制器中测试了锚滚动作为可点击的功能，这是有效的。这是

的代码

$scope.anchor = function () {
    console.log('test');
    $location.hash('comments');
    $anchorScroll();
};

如果我尝试立即调用该功能

$scope.anchor();

如果我尝试在$ stateChangeSuccess上调用它，则没有任何反应。我扔了一个理智的日志，然后开火了。我还尝试了一个技巧，以防止进一步的路由逻辑。在链接的帖子中提到了它，但我不确定它是否对我的情况是必要的。

app.run(function ($rootScope, $location, $stateParams, $anchorScroll) {

    // allow anchorScrolling
    $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
        console.log('stateChangeSuccess');
        var old = $location.hash();
        $location.hash('comments');
        $anchorScroll();

        //reset to old to keep any additional routing logic from kicking in
        $location.hash(old);
    });

});

我猜测我遇到了竞争条件，或者我的主播滚动以某种方式触发了另一条路线变化。但我无法弄清楚如何追踪这些问题。有什么想法吗？

编辑：更新我删除了$ location.hash（旧）;并将其余的$ anchorScroll片段放入超时功能，它现在正在工作。我还在$ stateParams.scrollTo中添加了这个，使其可用于查询参数。关于什么导致我的竞争条件以及如何在没有超时功能的情况下解决这个问题的想法？

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
    console.log('stateChangeSuccess');

    $timeout(function() {
        $location.hash($stateParams.scrollTo);
        $anchorScroll();
    }, 300);


});

Answer 1

来自 $anchorScroll documentation

It also watches the $location.hash() and scrolls whenever it changes to match any anchor. This can be disabled by calling $anchorScrollProvider.disableAutoScrolling().

尝试删除$ location.hash（旧）;

如果修复它，请使用$ anchorScrollProvider.disableAutoScrolling（）来禁止它对另一个状态更改做出反应。

无法获得$ anchorScroll在$ stateChangeSuccess上工作？

1 个答案: