当我从目的地链接返回时，如何在列表组中保持该位置

How can I mantain the position in a list group when I go back from a destination link?

本文关键字：列表 位置 目的地 链接 返回      更新时间：2024-01-29

用bootstrap开发一个angularjs应用程序，我在承诺后生成了一个web。然后，有一个带有链接项目的长列表组。此列表是用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（位置ID），但我不知道如何将卷轴放在特定的ID中。如果我使用传统格式（URL#id）构建URL，则不会发生任何事情。

在目的地url有一个返回按钮。这是代码：

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

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

基本上，如果你的web是在promise之后生成的，或者你的操作（滚动）依赖于DOM，那么你必须在一个有角度的摘要循环之后执行你的函数。

当你点击列表中的一个元素时，你必须存储scrollTop信息。为了做到这一点，请更改ng点击行为：

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.
};
相关文章：