javascript - Angular UI 路由器 : Setting autoscroll on header view does not scroll to top

Question

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

设置

我有一个 Angular 1.4.1应用程序，使用 UI 路由器 0.2.15和 Angular Material 0.10.0 .

Example Plunk

有一个父状态叫做website和三个子状态:home , foo和 bar .

父状态有一个 wrapper View ，通过 <ui-view> 显示在 index.html 中标记.它还有另外两个 View ，header@website和 footer@website ，它通过 wrapper 显示查看模板。

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

我的期望

在母国的wrapper查看模板，当我设置 autoscroll="true"在 ui-view 上header@website 的标签 View ，我希望页面在状态更改时滚动到顶部。查看 this SO question 的已接受答案.

发生了什么

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

我尝试过的

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

我的怀疑

我认为问题与 header@website 这一事实有关是属于 website 的 View 状态，那autoscroll仅适用于通常显示在当前模板上的 View 。换句话说，通常是 header View 将通过 index.html 显示, 不是 wrapper.html .

问题

我的上述猜测是否正确？我是否需要重构，或者有没有办法让它按原样工作？

提前致谢!

Answer 1

虽然我不提倡在指令之外进行 DOM 操作，但一个快速而肮脏的解决方案是在顶级模块定义的 .run block 中添加一个 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() 方法，但由于您的链接位于页面底部，那是页面滚动到的位置，所以您实际上没有注意到它在做什么任何东西。