0

I'm trying to adapt the answer give in this similar question How to handle anchor hash linking in AngularJS. I need to be able to use it with ui-router. I've tested anchor scrolling as a clickable function in my controller and that is working. Here is the code for that

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

If I try to invoke that function immediately nothing happens

$scope.anchor();

If I try to invoke it on a $stateChangeSuccess nothing happens. I threw in a log for sanity and that is firing. I also tried a trick to prevent further routing logic from kicking in. It was mentioned in the linked post but I'm not sure if it's necessary for my case.

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);
    });

});

I'm guessing that I'm running into race conditions or my anchor scroll is somehow triggering another route change. But I can't figure out how to track these issues down. Any thoughts?

EDIT: Update I removed the $location.hash(old); and put the rest of the $anchorScroll pieces into a timeout function and it's now working. I also added in the $stateParams.scrollTo to make this useable with query params. Any ideas as to what is causing my race condition and how this might be solved without a $timeout function?

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

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


});
Community
  • 1
  • 1
Constellates
  • 2,083
  • 3
  • 19
  • 29

1 Answers1

0

From $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().

Try removing $location.hash(old);

If that fixes it, use $anchorScrollProvider.disableAutoScrolling() to disable it reacting to another state change.

Jkarttunen
  • 6,764
  • 4
  • 27
  • 29