Обработка хеша привязки в AngularJS

Навигация по веб-страницам с использованием привязок была обычной практикой, особенно для длинных страниц с несколькими разделами. Однако в приложениях AngularJS обработка якорных ссылок может быть проблематичной.

При нажатии на якорные ссылки в AngularJS поведение по умолчанию заключается в перехвате щелчка и перенаправлении пользователя на другую страницу. Чтобы решить эту проблему, AngularJS предлагает решение.

$anchorScroll()

Сервис $anchorScroll() в AngularJS специально разработан для обработки привязки хеша привязки. Этот сервис позволяет вам прокручивать элемент на текущей странице на основе хеш-значения в URL-адресе.

Чтобы использовать $anchorScroll(), просто внедрите его в свой контроллер и вызывайте при необходимости. Служба принимает необязательный параметр id, который указывает элемент для прокрутки. Если идентификатор не указан, он выполнит прокрутку до элемента с идентификатором, соответствующим $location.hash().

app.controller('TestCtrl', function($scope, $location, $anchorScroll) {
   $scope.scrollTo = function(id) {
      $location.hash(id);
      $anchorScroll();
   }
});

Test/Foo

Упрощенный подход

Для еще более простого подхода вы можете использовать этот модифицированный подход код:

app.run(function($rootScope, $location, $anchorScroll) {
  //when the route is changed scroll to the proper element.
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    if($location.hash()) $anchorScroll();  
  });
});

Ваша якорная ссылка будет выглядеть так:

Test/Foo

Используя эти методы, вы можете плавно управлять связыванием хешей привязки в своих приложениях AngularJS, обеспечивая удобство навигации по длинным страницам с несколькими разделами.