如何"记住"在带有Ui.ROUTER的angularJS中的滚动位置

Question

我有一个项目我正在使用带有ui.router的angularJS,如果用户点击某个事件来查看详细信息,则会显示一个后退按钮但是在点击后面时,我们会有一个非常长的事件列表(具有无限滚动) div的滚动重置回顶部!寻找一些关于是否有内置的建议,我可以利用它来记住这个滚动位置,我知道这是锚定服务,但我想知道是否有更适合停止角度重置导航滚动位置的东西?? 因为有一些相似的列表需要在滚动时记住它们的状态..我已经查看并尝试实现ui-router-extras dsr和sticky但是两者都没有工作..
示例在http:// codedef. com/hapzis_poc / .不是完整的证明,但应该能够向下滚动事件,点击并返回并保持在相同的滚动位置..

Answer 1

有一个关于类似主题的对话 ( ng-view)，@br2000 给出的答案对我有用。

/sf/answers/1755144751/

要使他的指令发挥作用，请ui-router执行以下操作：

1. 像这样创建新指令：

(function () {
    'use strict';

    angular
        .module('your.module.directives')
        .directive('keepScrollPos', keepScrollPos);

    function keepScrollPos($route, $window, $timeout, $location, $anchorScroll, $state) {

        // cache scroll position of each route's templateUrl
        var scrollPosCache = {};

        // compile function
        var directive = function (scope, element, attrs) {

            scope.$on('$stateChangeStart', function () {
                // store scroll position for the current view
                if($state.$current)
                { 
                    scrollPosCache[$state.current.templateUrl] = [$window.pageXOffset, $window.pageYOffset];
                }
             });

            scope.$on('$stateChangeSuccess', function () {
                // if hash is specified explicitly, it trumps previously stored scroll position
                if ($location.hash()) {
                    $anchorScroll();

                // else get previous scroll position; if none, scroll to the top of the page
                } else {
                    var prevScrollPos = scrollPosCache[$state.current.templateUrl] || [0, 0];
                    $timeout(function () {
                        $window.scrollTo(prevScrollPos[0], prevScrollPos[1]);
                }, 0);
            }
        });
    };

    return directive;
}
})();

2. 在具有该属性的元素上使用它ui-view，在我的例子中：

<div class="col-xs-12" ui-view keep-scroll-pos></div>