Question

在我的应用程序中，它以编程方式返回到前一个URL的后退按钮。这是我的工作：

$window.history.back();

现在，在更改为上一个url（控制器/模板完全加载）后，我想执行一些代码。我如何听取$ window.history.back（）的成功？我想实现它滚动到与以前完全相同的位置。我需要这样做是因为我希望滚动一般在事件$stateChangeSuccess的顶部但是如果sb。回到后退按钮它应该回到滚动位置（正常列表 - 细节 - 视图 - ＆gt;如果sb进入详细视图并返回列表，滚动位置应该与之前相同）。不幸的是this在加载完整的控制器/视图之前调用它不起作用。

修改

我的计划如下。在run-function中：

var lastScrollPosition = 0;
$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
    lastScrollPosition = $(window).scrollTop();
    $("html, body").animate({
        scrollTop: 0
    }, 0);
});

$rootScope.backButton = function() {
    $window.history.back().then(function() {
        $("html, body").animate({
            scrollTop: lastScrollPosition
        }, 0);
    });
};

因此，如果状态改变了滚动位置被保存，那就有效。如果按下后退按钮，则会调用backButton - 功能。执行$window.history.back() - 命令后，我想调用一个Success-Function并跳转到保存的滚动位置 - ＆gt; tbd如何实现这一功能。

Answer 1

从另一个方面来看这可能更容易：将滚动位置恢复作为$ stateChangeSuccess的默认行为（带有分配给每个状态的最后滚动位置的地图，在$ stateChangeStart上更新），并处理用户单独点击链接案例，因为您可以更好地控制这些案例。

将ui-sref替换为ng-click='go(state, params)'，具有全局go函数，该函数只会翻转一个标记，表示您要在$ stateChangeSuccess回调中滚动到顶部。

var scrollPositions = {};

$rootScope.go = function gotoState(state, params, options) {
   $rootScope.scroll_to_top = true;
   $state.go(state, params, options);
}

$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
    $("html, body").animate({
        scrollTop: !$rootScope.scroll_to_top && scrollPositions[toState] || 0
    }, 0);
    $rootScope.scroll_to_top = false;
});


$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
    scrollPositions[fromState] =  $(window).scrollTop();
    });

AngularJS - $ window.history.back（）的成功回调

1 个答案: