$state.go没有更改Url

Question

我使用的是带有ui路由器的Angular.js 1.3。我有3个页面，page1.html，page2.html，page3.html。

当用户单击page1时，page2将打开，但我想保存用户在单击之前所在页面1的滚动状态，这样在单击back按钮后，他将处于相同的滚动状态。

为了解决这个问题，我在iframe中的page1.html上打开了page2.html，并为它提供了在page1.html上显示的绝对位置，我使用：

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

来更改url。这个实现工作得很好。

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

$state.go("page3")

现在的问题是状态改变了，page3.html加载了，但是url仍然是/page2.html，url没有改变。

我甚至试过：

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

尽管如此，url仍然没有改变。有没有人知道为什么会这样。

Answer 1

尽管你试图实现的解决方案非常有创意，但我真的会选择另一个方向。

您有多种选择，所有这些都依赖于在某个地方缓存滚动位置。例如：

var scrollTopData = {};

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

那么问题仍然是如何处理你缓存的滚动位置。$state.go返回一个promise，因此解决方案是：

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返回的promise。

Answer 2

如果你改变了angular的默认行为，你不能改变url。url中散列后的部分会自动更改。您不需要更改urls，因为您强制浏览器使用/somepage.html

试试像/#somepage.html这样的东西

请注意此处添加的散列(#)。