如何使用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

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

Answer 1

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

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

Answer 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
}

Answer 3

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

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