$ state.go不会更改Url

Question

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

当用户点击page1时,page2将打开,但我想保存第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。