如何使用 angular-ui-router 滚动到页面区域？答案

【问题标题】：How can I scroll to an area of a page with angular-ui-router?如何使用 angular-ui-router 滚动到页面区域？
【发布时间】：2016-05-26 22:23:49
【问题描述】：

我有一个带有网格表的网页。当显示没有点击行的网格时，状态为“home.pages”，页面 URL 显示如下：

http://localhost:1495/subjects/4/admin/words

当用户单击网格中单词 1234 的行时，状态将更改为“home.pages.page”，wordId 参数为 1234，URL 显示如下：

http://localhost:1495/subjects/4/admin/words/1234

当我使用 Angular ui-router 时，是否可以让页面滚动到 wordId 为 1234 的行？

【问题讨论】：

你能用普通的 html 锚点吗？
@andrew.butkus - 是的，我可以使用这些，但我不确定如何将这些与 angular-ui-router 状态集成。我希望能找到一些可以作为我需要做的基础的例子。
docs.angularjs.org/api/ng/service/$anchorScroll 或许在路线变化时设置一个watch，并拿起id，然后使用锚滚动滚动到路径上的id。
你能选出正确的答案吗？

标签： angularjs angular-ui-router

【解决方案1】：

您可以使用$anchorScroll 服务滚动到页面的某个区域，无论您使用的是 angular-ui/ui-router 还是 ng-route。您只需为您的行创建一个控制器，在这种特殊情况下，注入必要的服务，例如：$scope、$stateParams、$anchorScroll、$location 并声明一个管理滚动逻辑的方法，例如：模板：

<div ng-controller="RowsCtrl">
    <h1>State 1</h1>
    <p>Id: {{id}}</p>
    <hr/>
    <a ui-sref="state1.list">Show List</a>

    <div class="fixed-header">
      <a href="" ng-click="gotoRow(x)" ng-repeat="x in [1,2,3,4,5]">
        Go to row {{x}}
      </a>
    </div>

    <div id="row{{x}}" class="anchor" ng-repeat="x in [1,2,3,4,5]">
      Row {{x}} of 5
    </div>
    <div ui-view></div>
</div>

ui-router 的 Angular 状态配置：

angular
  .module('angularApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ui.router'
  ])
  .config(function($stateProvider, $urlRouterProvider) {
    //
    // For any unmatched url, redirect to /state1
    $urlRouterProvider.otherwise("/state1");
    //
    // Now set up the states
    $stateProvider
      .state('state1', {
        url: "/state1/:id",
        templateUrl: "views/partials/state1.html",
      })
      .state('state1.list', {
        url: "/list",
        templateUrl: "views/partials/state1.list.html",
        controller: function($scope) {
          $scope.items = ["A", "List", "Of", "Items"];
        }
      });
  });

控制器：

angular.module('angularApp')
  .controller('RowsCtrl', ['$scope','$stateParams','$anchorScroll', '$location', 
    function ($scope, $stateParams, $anchorScroll, $location) {
    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];

    $scope.id = $stateParams.id;

    $scope.gotoRow = function(x) {
      var newHash = 'row' + x;
      if ($location.hash() !== newHash) {
        // set the $location.hash to `newHash` and
        // $anchorScroll will automatically scroll to it
        $location.hash('row' + x);
      } else {
        // call $anchorScroll() explicitly,
        // since $location.hash hasn't changed
        $anchorScroll();
      }
    };
  }]);

它会完美运行！我希望一切都清楚，您可以解决您的问题。

【讨论】：

【解决方案2】：

在您的文字页面的控制器中，您应该查看 /words 的 $stateParams，然后据此采取行动。

我建议您将 wordId 添加为 queryParam 而不是路径的一部分（如 http://localhost:1495/subjects/4/admin/words?wordId=1234）

假设你的 ui-router 配置中有这样的东西：

$stateProvider.state('subjects.admin.words', {
   url: '?' + admin/words?wordId',
   …
})

你可以这样做

$scope.$watch(
  function () {
    return $stateParams.wordId;
  }, 
  function (wordId) {
    if (wordId) {
      scrollTo(wordId);
    }
  }
);

function scrollTo(line) {
  // scroll code
}

【讨论】：

【解决方案3】：

我想这就是你所追求的：AngularJS anchorScroll

【讨论】：

【解决方案4】：

路由器：

 $stateProvider
   .state('home.pages', {
     url: 'pages/',
     // Template, controller,...
   });
   .state('home.pages.page', {
     url: 'page/:wordId',
     // Template, controller,...
   });

控制器 (home.pages.page)：

if ($stateParams.wordId) {
    $timeout(function () {
        document.documentElement.scrollTop = document.body.scrollTop = $stateParams.wordId;
    });
}

【讨论】：