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

【问题标题】：UI Router - Remember scroll position when transition between statesUI 路由器 - 在状态之间转换时记住滚动位置
【发布时间】：2015-03-10 02:05:23
【问题描述】：

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

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

如果用户点击后退按钮，它确实会这样做，但如果我将它与 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

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

【问题讨论】：

您可以随时指定使用history.back()，例如 - gist.github.com/philBrown/cc891c017e0a114cd7f0

标签： javascript angularjs angular-ui-router

【解决方案1】：

这就是我想出的。从详细视图导航回列表视图时，传递正在显示的项目的 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();
  };
});

【讨论】：