UI 路由器 - 在状态之间转换时记住滚动位置

UI Router - Remember scroll position when transition between states

本文关键字：滚动 位置 转换 之间 路由器 状态 UI      更新时间：2023-09-26

我有两个视图：起始页和详细信息页。

起始页很长，我希望用户在从详细信息页面返回时返回到其最后一个位置。

如果用户点击后退按钮，它就会这样做，但是如果我将其与ui-sref或a标签链接以启动它，它将始终转到页面顶部。

是否可以在所有情况下都具有后退按钮功能？

<a ui-sref="start">Back</a> - (goes to top)
<a href="javascript:window.history.back()">Back</a> - (wanted behaviour)

我创建了一个快速的 Plunker 来说明我的示例。

http://plnkr.co/edit/z8kdD7ONkL4bML4IaFNz?p=preview

请点击 在单独的窗口中启动 按钮以获得预期的行为。

这就是我想出的。 从详细信息视图导航回列表视图时，传递正在显示的项目的 ID。 然后将列表中的该项滚动回视图中。

http://plnkr.co/edit/tWv4UNbBdSbes3XKEcYw?p=preview

.html：

<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
    <title>ui router test</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div ui-view  class="main-view"></div>


<script id="templates/start.html" type="text/ng-template">
  <p>Return to {{value}}</p>
  <div class="start">
    <div ng-repeat="i in getNumber(30) track by $index" class="box" id="item_{{$index}}" ui-sref="detail({id:$index})">
       {{$index}}
    </div>
  </div>
</script>
<script id="templates/detail.html" type="text/ng-template">
  <div class="detail">
    Page: {{id}} <br><br>
    <button ui-sref="start({id:id})">Start by sref</button>
    <button ng-click="goBack()">Back by history</button>
    <a href="#/?id={{id}}">Link</a>
  </div>
</script>


<script type="text/javascript" src="http://code.angularjs.org/1.3.14/angular.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.2.14/angular-animate.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.2.14/angular-touch.js"></script>
<script type="text/javascript" src="https://cdn.cdnhttps.com/cdn-libraries/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script type="text/javascript" src="ui-router-extras.js"></script>
<script type="text/javascript" src="app.js"></script>

</body>
</html>

.js：

var app = angular.module('myApp', ['ngAnimate', 'ui.router', 'ct.ui.router.extras.dsr']);
app.config(function ($stateProvider,$urlRouterProvider) {
  $urlRouterProvider.otherwise("/");
  $stateProvider
    .state('start', {
          url: "/?id",
          templateUrl: "templates/start.html",
          controller: 'StartCtrl',
          deepStateRedirect: true
      })
    .state('detail', {
        url: "/detail/:id",
        templateUrl: "templates/detail.html",
        controller: 'DetailCtrl',
        deepStateRedirect: true
    })
});
app.controller('StartCtrl', function($scope, $stateParams, $location, $anchorScroll) {
  $scope.getNumber = function(num) {
      return new Array(num);   
  }
  $scope.value = $stateParams.id;
  if($scope.value) {
    $location.hash("item_" + $scope.value);
    $anchorScroll();
  }
});
app.controller('DetailCtrl', function($scope, $stateParams) {
  $scope.id = $stateParams.id;
  $scope.goBack = function() {
    window.history.back();
  };
});
相关文章：