如何 'remember' 在 angularJS 中滚动位置 w/ Ui.ROUTER

Question

我有一个项目，我正在使用 angularJS 和 ui.router 我们有一个事件列表，如果用户点击一个事件查看详细信息显示后退按钮，但是在单击后退时，div 的滚动会重置回顶部！寻找一些关于是否有任何 built 的建议，我可以利用它来记住这个滚动位置，我知道有 anchorscroll 服务，但我想知道是否没有更多的东西 suited 停止 angular 重置导航滚动位置？因为有一些与此类似的列表需要在滚动时记住它们的状态。我已经研究并尝试实施 ui-router-extras dsr 和 sticky 但两者都不起作用..
例如 http://codedef.com/hapzis_poc/ 。不是一个完整的证明，但应该能够向下滚动事件，单击左右并返回并保持相同的滚动位置..

Answer 1

要使粘性状态起作用，您不得破坏DOM 元素。查看您的状态结构，根据 ui-router-extras 文档，您正在为状态 home 使用命名的 ui-view body。但是，当转换到 about 状态时，您会破坏 ui-view 元素，该状态也使用 body ui-view。这可以通过检查 DOM.

来观察

.state('home', {
        url: "",
        deepStateRedirect: true,
        sticky: true,
        views: {
            "body": {
                templateUrl: 'templates/home.html'
            },
            "event_list@home": {
                sticky: true,
                templateUrl: "templates/eventList.html",
                controller: "eventListCtrl"
            }
        }
    })
    .state('about', {
        url: 'about',
        views: {
            "body": { // BAD, you just clobbered the sticky ui-view with this template
                templateUrl: 'templates/about.html'
            }
        }
    });

确保不重复使用粘性状态的 ui-view。对于您的示例，将 about 状态放在未命名视图中。

    .state('about', {
        url: 'about',
        templateUrl: 'templates/about.html'
    });

index.html:

<div ui-view="body" ng-show="$state.includes('home')"></div>
<div ui-view></div>

js:

app.run(function($rootScope, $state) { $rootScope.$state = $state } );

Answer 2

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

要使他的指令对 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>

如何 'remember' 在 angularJS 中滚动位置 w/ Ui.ROUTER

How to 'remember' scroll position in angularJS w/ Ui.ROUTER

angularjs

angular-ui-router

angular-ui-router-extras