javascript - 当我从目标链接返回时，如何保持在列表组中的位置？

Question

使用 bootstrap 开发 angularjs 应用程序，我在 promise 后生成了一个网络。然后，有一个包含链接项目的长列表组。该列表是使用 ng-repeat 生成的。

当我点击一个项目然后返回时，我失去了我在列表中的位置，它把我带到了列表的顶部。

我怎样才能返回并恢复到原来的位置？

这里有一些代码:

<div class="list-group">         
  <a id="{{pos.id}}" class="list-group-item" bindonce ng-repeat="pos in elements" ng-click="go('/otherPlace/{{pos.id}}')">
    <h4 class="list-group-item-heading" bo-bind="pos.id"></h4>
    <span class="list-group-item-text" bo-bind="pos.description"></span>
  </a>
</div>

我在列表的每个元素中都有ID(pos.id)，但我不知道如何将滚动放在特定的id中。 如果我使用传统格式 (URL#id) 构建 URL，则不会发生任何事情。

在目标网址处有一个返回按钮。这是代码:

$scope.returnToMainPage(){
  $window.history.back();
}

Answer 1

https://stackoverflow.com/a/29760881/4679838中解决了类似的问题

基本上，如果您的 Web 是在 Promise 之后生成的，或者您的操作(滚动)依赖于 DOM，则必须在 Angular 摘要循环之后执行您的函数。

当你点击列表中的一个元素时，你必须存储scrollTop信息。为此，请更改 ng-click 行为:

ng-click="saveScrollTopAndGoToURL ('/otherPlace/{{pos.id}}')"

这就是函数的实现:

$scope.saveScrollTopAndGoToURL = function (destinationUrl)
{
    $rootScope.scrollTop = document.body.scrollTop;
    $location.path(destinationUrl);
}

然后，当您从目标 URL 返回时，您必须恢复它。

$scope.returnAndRestoreScrollTop = function() {
    $window.history.back();     
    $timeout(function() {
      document.body.scrollTop = $rootScope.scrollTop;
    }, 500, false); // There is a 500 ms delay before executing the function.
};