7

私は ui.router で angularJS を使用しているプロジェクトを持っています。ユーザーがイベントをクリックして詳細を表示すると、非常に長くなる可能性がある (無限スクロールがある) イベントのリストがありますが、戻るをクリックすると戻るボタンが表示されます。 div のスクロールが一番上にリセットされます! このスクロール位置を記憶するために活用できるものが組み込まれているかどうかについていくつかの提案を探しています。アンカースクロールサービスがあることは知っていますが、角度がナビゲーションのスクロール位置をリセットするのを止めるのに適したものがないかどうか疑問に思っています?? スクロールしたときに状態を記憶する必要がある、これに似たリストがいくつかあるため.. ui-router-extras dsr と sticky を調べて実装しようとしましたが、どちらも機能していませ
ん.. 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;
}
})();

2.ui-view私の場合、属性を持つ要素で使用します。

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