3

TL;DR: With Angular UI Router, is it possible to autoscroll to a view of the same state that the template displaying it belongs to?

The Setup

I have an Angular 1.4.1 app, using UI Router 0.2.15 and Angular Material 0.10.0.

Example Plunk

There is a parent state called website and three child states: home, foo and bar.

The parent state has a wrapper view, which is displayed via the <ui-view> tag in index.html. It also has two other views, header@website and footer@website, which it displays via the wrapper view template.

Each of the three child states has a main view, which is displayed via the parent state's wrapper view template.

What I Expect

In the parent state's wrapper view template, when I set autoscroll="true" on the ui-view tag for the header@website view, I expect that the page will scroll to the top whenever the state changes. See the accepted answer of this SO question.

What Is Happening

When any of the ui-sref links in the footer is clicked, the page does not scroll to the top.

What I've Tried

If I put autoscroll="true" on the ui-view tag for the main view, it works as expected. This is not what I want, however, because the header is hidden from view even when you navigate to a state from the address bar.

What I Suspect

I think the problem has to do with the fact that header@website is a view that belongs to the website state, and that autoscroll only works for views that normally are displayed on the current template. In other words, normally the header view would be displayed via index.html, not wrapper.html.

The Question

Is my suspicion above correct? Do I need to refactor, or is there a way to make this work as is?

Thanks in advance!

Community
  • 1
  • 1
Shaun Scovil
  • 3,905
  • 5
  • 39
  • 58
  • From memory, your assumption is correct. I've worked around this in the past via CSS top-padding on the main view's element – Phil Jul 16 '15 at 03:28
  • Thanks, Phil. I just tried refactoring the Plunk to test my theory, and it still doesn't work. See this example: http://plnkr.co/edit/TWdFCjRoUyUEOSteJzqQ?p=preview – Shaun Scovil Jul 16 '15 at 03:34

1 Answers1

0

Though I don't advocate DOM manipulation outside of a directive, a quick and dirty solution would be to add a scrollTo method in a .run block of your top level module definition, for ex:

.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

(borrowed from here https://stackoverflow.com/a/22166553/1516309)

I tried using the $anchorScroll() method of ui-router, but since your links are at the bottom of the page, thats where the page scrolls to, so you dont actually notice it doing anything.

Community
  • 1
  • 1
jakeforaker
  • 1,622
  • 1
  • 20
  • 34
  • Thanks jakeed1...I had seen that solution as well in my research, but wasn't crazy about using it because supposedly UI Router's autoscroll attribute already solves this problem. I'm just wondering if what I am seeing is a bug in autoscroll's use of the [$uiViewScroll](http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$uiViewScroll) service, or if I'm just doing something wrong. – Shaun Scovil Jul 16 '15 at 17:33