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:
<a ui-sref="stateParent.stateChild({id: 'practiceParam'})">goToPage</a>
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:
<div scroll-after-load ></div>
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.
