Question

我正在使用Angular.js 1.3，使用ui-router。我有3页，page1.html，page2.html，page3.html。

当用户点击第1页时，第2页将会打开，但是我想保存第1页的滚动状态，用户在点击之前是这样的，这样在点击后退按钮后他就会处于相同的滚动状态。

为了解决这个问题，我在page1.html上打开了page2.html，在iframe中，并给出了绝对位置以显示在page1.html上，我正在使用：

history.pushState({}, '', '/page2.html');

更改网址。这个实现工作正常。

现在，当用户点击page2.html上的链接时，它应该打开page3.html，就像我使用的普通链接一样：

$state.go("page3")

问题现在是状态变化，并且page3.html加载，但url仍然是/page2.html，url没有变化。

我甚至尝试过：

history.pushState({}, '', '/page3.html');

仍然网址没有变化。任何人都知道它为什么会发生。

Answer 1

即使您尝试实施的解决方案非常有创意，我也会选择另一个方向。

您有各种选择，所有选项都依赖于在某处缓存滚动位置。例如：

var scrollTopData = {};

function changeState (toState) {
    var currentStateName = $state.current.name;
    scrollTopData[currentStateName] = window.scrollY;
    $state.go(toState);
}

然后问题仍然是你要缓存的滚动位置。 $state.go返回一个承诺，因此解决方案是：

var scrollTopData = {};

function changeState (toState) {
    var currentStateName = $state.current.name;
    scrollTopData[currentStateName] = window.scrollY;

    $state.go(toState).then(function () {
        if (toState in scrollTopData) {
            window.scrollTo(0, scrollTopData[toState]);
        }
    });
}

根据您的实施情况，您还可以使用asgoth的答案：

我之前没有使用它，但angular有$anchorScroll服务。至于重新加载数据，您可以使用$cacheFactory对其进行缓存，或将数据存储在更高的范围内。

另一种解决方案是使用stateChangeEvent。例如：

$rootScope.$on('$stateChangeSuccess',
    function (event, toState, toParams, fromState, fromParams) {
        // Do magic
    }
);

我的建议是使用$state.go返回的承诺。

Answer 2

如果更改角度的默认行为，则无法更改网址。哈希后url中的部分自动更改。您没有更改网址，因为您强制浏览器访问/somepage.html

尝试像/#somepage.html

这样的东西

注意这里添加了哈希（＃）。

$ state.go不会更改Url

2 个答案: