Question

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

设置

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

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

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

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

我的期望

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

发生了什么

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

我尝试过什么

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

我怀疑

我认为问题与header@website属于website状态的视图有关，而autoscroll仅适用于通常显示在header状态的视图当前模板。换句话说，index.html视图通常会通过wrapper.html而不是onView(withId(R.id.edtDeviceName)).perform(click());显示。

问题

我的怀疑是否正确？我需要重构，还是有办法让这个工作原样？

提前致谢！

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()方法，但由于您的链接位于页面底部，即页面滚动到的位置，因此您实际上并未注意到它正在执行任何操作。

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

1 个答案: