如何在AngularJs中的无限滚动中实现后退按钮？

Question

我正在构建一个带有angularjs的应用程序,我已经实现了无限滚动技术,因为我有很多要展示的项目,所以这是一个比分页更好的体验,但是如果用户点击项目那么我有它的坏处是它会转到项目页面,但是当他想要回去时,他会在顶部,他应该继续滚动.这就是我想要完成的,如果他按下按钮他可以回到他所在的位置!

上市物品:

<div class="container" id="infinit-container" ng-controller="ArticlesController">

    <div id="fixed" when-scrolled="LoadMore()">
        <div ng-repeat="article in Articles">
            <article-post article="article"></article-post>
        </div>
    </div>
</div>

这是when-scrolled指令

app.directive('whenScrolled', function () {
return function (scope, element, attrs) {
    $('#fixed').height($(window).height());
        var div = element[0];
        element.bind('scroll', function () {
            if (div.scrollTop + div.offsetHeight >= div.scrollHeight) {
                scope.$apply(attrs.whenScrolled);

            }
        })
    }
})

那就是控制器

app.controller('ArticlesController', function ($scope, UserService) {
  $scope.Articles = [];

  var page = 0;
  $scope.LoadMore = function () {
    UserService.Articles(page)
      .success(function (data) {
        $scope.Articles.push.apply($scope.Articles, data);
      });
    page++;

  };
  $scope.LoadMore();
});

Answer 1

我使用页码，在查看项目详细信息时将页码保存在某处（我更喜欢 sessionStorage），当用户返回列表时，读取页码并加载页面。

这是主页控制器（列表）的简单代码

app.controller('ArticlesController', function($scope, UserService) {
    $scope.Articles = [];

    var page = 0;
    $scope.LoadMore = function() {
        UserService.Articles(page)
            .success(function(data) {
                $scope.Articles.push.apply($scope.Articles, data);
            });
        page++;

    }

    $scope.LoadArticle = function(articleId) {
        sessionStorage.setItem("pageNumber", page);

        /// change path to somewhere you want show your article
    };


    //it will load the page you coming back from
    if (sessionStorage["pageNumber"]) {
        page = parseInt(sessionStorage["pageNumber"]);
    }
    LoadMore();
});

由于使用了 sessionStorage ，如果用户按预期关闭浏览器或页面，它将被删除。