Angular UI router: setting autoscroll when viewing header does not scroll to top
TL; DR: With Angular UI Router is it possible to auto-scroll a view of the same state as its display?
Customization
I have an Angular app 1.4.1
using UI Router 0.2.15
and Angular Material 0.10.0
.
There is a parent state the name website
and three subsidiaries states: home
, foo
and bar
.
The parent state has a view wrapper
that is displayed via a tag <ui-view>
in the index.html
. It also has two other views, header@website
and footer@website
, which it renders using a view template wrapper
.
Each of the three child states has a view main
that is displayed through the parent state's view template wrapper
.
What i expect
In the view template of the parent state wrapper
, when I set autoscroll="true"
in the tag ui-view
for the view header@website
, I expect the page to scroll to the top whenever the state changes. See the accepted answer of this SO question .
What's happening
Clicking any of the links ui-sref
in the footer does not scroll to the top of the page.
What i tried
If I put autoscroll="true"
in a tag ui-view
for the main view, it works as expected. However, this is not what I want, because the title is hidden from view even when you navigate to the state from the address bar.
What i suspect
I think the problem has to do with what header@website
is a stateful view website
and what autoscroll
only works for views that are normally rendered in the current template. In other words, usually the view header
will be rendered through index.html
rather than wrapper.html
.
Question
Is my suspicion higher than correct? Do I need refactoring, or is there a way to make this work as it is?
Thanks in advance!
source to share
While I am not advocating DOM manipulation outside the directive, a quick and dirty solution is to add a scrollTo method to .run
your top level module definition block , like so:
.run(function ($window, $rootScope) {
$rootScope.$on('$viewContentLoaded', function () {
var interval = setInterval(function () {
if (document.readyState == "complete") {
window.scrollTo(0, 0);
clearInterval(interval);
}
}, 1);
});
})
http://plnkr.co/edit/qPqy69o7F9aTjNbUTMGY?p=preview
(taken from here fooobar.com/questions/26793 / ... )
I tried using the method $anchorScroll()
for ui-router, but since your links are at the bottom of the page, that is, where the page is scrolling, so you don't really notice anything.
source to share