Angular UI Router：在标题视图上设置自动滚动不会滚动到顶部

Question

TL;DR：使用 Angular UI Router，是否可以自动滚动到显示它的模板所属的相同状态的视图？

设置

我有一个 Angular 1.4.1 应用程序，使用 UI Router 0.2.15 和 Angular Material 0.10.0。

Example Plunk

有一个称为website 的父状态和三个子状态：home、foo 和bar。

父状态有一个wrapper 视图，通过index.html 中的<ui-view> 标签显示。它还有另外两个视图，header@website 和 footer@website，通过 wrapper 视图模板显示。

三个子状态中的每一个都有一个main 视图，通过父状态的wrapper 视图模板显示。

我的期望

在父状态的wrapper 视图模板中，当我在ui-view 标记上为header@website 视图设置autoscroll="true" 时，我希望每当状态更改时页面都会滚动到顶部。请参阅this SO question 接受的答案。

发生了什么

当点击页脚中的任何ui-sref 链接时，页面不会滚动到顶部。

我的尝试

如果我将autoscroll="true" 放在主视图的ui-view 标记上，它会按预期工作。然而，这不是我想要的，因为即使您从地址栏导航到某个状态，标题也会从视图中隐藏。

我的怀疑

我认为问题在于header@website 是属于website 状态的视图，而autoscroll 仅适用于通常显示在当前模板上的视图。换句话说，通常header 视图将通过index.html 显示，而不是wrapper.html。

问题

我的怀疑是正确的吗？我是否需要重构，或者有没有办法让它按原样工作？

提前致谢！

Answer 1

虽然我不提倡在指令之外进行 DOM 操作，但快速而肮脏的解决方案是在顶级模块定义的 .run 块中添加一个 scrollTo 方法，例如：

.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

（借用这里https://stackoverflow.com/a/22166553/1516309）

我尝试使用 ui-router 的 $anchorScroll() 方法，但是由于您的链接位于页面底部，因此页面滚动到那里，因此您实际上没有注意到它在做什么。