AngularJS: Auto-scroll to anchor point after state change

Question

I am looking to have a user click a link on a page, this will trigger a stateChange and lead them to a new state. what I want to achieve is when the state is finished loading it then scrolls to an anchor on the page specified by the link on the previous page.

to Do this I am using a combination of passing a $stateParam through a ui-sref like so:

goToPage

then when the page is reached there is a div sitting on it with a directive attached that activates on $viewContentLoaded, so the DOM is rendered and I can search for an ID. the HTML div looks like this:

and my scrolling directive is as follows:

angular.module( 'app' ).directive('scrollAfterLoad', function() {
  return {
    restrict: 'A',
    link: function(scope, $elm, attrs, $stateParams) {
        scope.$on('$viewContentLoaded', function() {
            console.log('scrollAfterLoad Directive Loaded, $stateParams are: ', $stateParams );
            var idToScroll = attrs.href;
            var $target;
            if (idToScroll) {
                $target = $(idToScroll);
                // the -50 accounts for the top navbar which is fixed on the page and removed from pageflow
                $("html,body").animate({scrollTop: $target.offset().top - 50}, "slow");
            }
        });
    }
  };
});

I have not bothered with setting the href on the div yet as I cannot access the passed parameter, am I accessing it incorrectly? I have also tried using a more standard state.go() to pass a stateParam but my result is still null.

Once I can pass a stateparam the Idea is just to add an href to the params that gets injected into the div on the newly loaded page and autoscroll to another div on that page with an ID that matches my passed parameter.

Also a side note, on my ui-view's i have autoscroll set to true so the pages automatically load at the top, I like this behaviour and it is the reason I need the state to complete loading before the scoll is activated.

LordTribual · Accepted Answer

Your problem is that you are trying to inject the $stateParams service into the link function. However, the correct place for this kind of injection is at the factory method, means the definition of the directive. A factory method is registered with a module - as in your case with the scrollAfterLoad directive. For more information check AngularJS Dependency Injection.

So back to your question: If you actually inject $stateParams into your factory method of your directive, means at the top you will be able to easily access the params. Your directive could look like this:

angular.module( 'app' ).directive('scrollAfterLoad', ['$stateParams', function($stateParams) {
  return {
    restrict: 'A',
    link: function(scope, $elm, attrs) {
        scope.$on('$viewContentLoaded', function() {
            console.log('scrollAfterLoad Directive Loaded, $stateParams are: ', $stateParams );
            var idToScroll = attrs.href;
            var $target;
            if (idToScroll) {
                $target = $(idToScroll);
                // the -50 accounts for the top navbar which is fixed on the page and removed from pageflow
                $("html,body").animate({scrollTop: $target.offset().top - 50}, "slow");
            }
        });
    }
  };
}]);

Notice that I have removed the $stateParams from your link function and put it at the top. This way the service will be already available within the link function - actually within the whole directive.

I reproduced your scenario in this Plunker.

AngularJS: Auto-scroll to anchor point after state change

Answers (2)

Related Questions