7

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

4

2 回答 2

3

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

https://stackoverflow.com/a/25073496/3959662

要使他的指令起作用，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;
}
})();

ui-view2.在你有属性的元素上使用它，在我的例子中：

<div class="col-xs-12" ui-view keep-scroll-pos></div>
于 2016-03-02T02:27:19.487 回答
1

要使粘性状态起作用，您不能破坏 DOM 元素。查看您的状态结构，根据 ui-router-extras 文档，您正在使用名为 ui-viewbody的 state 。home但是，当转换到状态时，您会破坏该 ui-view 元素about，该状态也使用bodyui-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'
    });

索引.html：

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

js：

app.run(function($rootScope, $state) { $rootScope.$state = $state } );
于 2015-03-03T18:26:50.960 回答