angularjs - 如何使用 angular-ui-router 滚动到页面的某个区域？

Question

我有一个带有网格表的网页。当显示没有点击行的网格时，状态为“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 的行？

Answer 1

您可以使用 $anchorScroll 滚动到页面的某个区域服务，无论您使用的是 angular-ui/ui-router 还是 ng-route。您只需为您的行创建一个 Controller ，在这种特殊情况下，注入(inject)必要的服务，如:$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"];
        }
      });
  });

Controller :

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

它会完美地工作!我希望一切都清楚，你可以解决你的问题。