Question

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

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

如果用户按下后退按钮，则确实如此，但如果我将其与ui-sref或标签链接以启动它将始终返回页面顶部。

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

<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

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

Answer 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();
  };
});

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

1 个答案: