Question

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

Answer 1

关于类似主题（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;
}
})();

<强> 2。在您拥有ui-view属性的元素上使用它，在我的情况下：

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

Answer 2

要使粘性状态起作用，一定不能破坏DOM元素。查看您的状态结构，根据ui-router-extras文档，您使用名为ui-view body的状态home。但是，您在转换到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 } );

如何记住＃39;使用/ Ui.ROUTER在angularJS中滚动位置

2 个答案: