AngularJS에서 앵커 해시 처리

앵커를 사용하여 웹 페이지를 탐색하는 것은 특히 여러 섹션이 있는 긴 페이지의 경우 일반적인 관행이었습니다. 그러나 AngularJS 애플리케이션에서는 앵커 링크 처리가 문제가 될 수 있습니다.

AngularJS에서 앵커 링크를 클릭할 때 기본 동작은 클릭을 가로채서 사용자를 다른 페이지로 리디렉션하는 것입니다. 이 문제를 해결하기 위해 AngularJS는 솔루션을 제공합니다.

$anchorScroll()

AngularJS의 $anchorScroll() 서비스는 앵커 해시 연결을 처리하도록 특별히 설계되었습니다. 이 서비스를 사용하면 URL의 해시 값을 기반으로 현재 페이지의 요소로 스크롤할 수 있습니다.

$anchorScroll()을 사용하려면 컨트롤러에 삽입하고 필요할 때 호출하기만 하면 됩니다. 이 서비스는 스크롤할 요소를 지정하는 선택적 id 매개변수를 사용합니다. ID가 제공되지 않으면 $location.hash()와 일치하는 ID를 가진 요소로 스크롤됩니다.

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 애플리케이션에서 앵커 해시 연결을 원활하게 처리하여 여러 섹션이 있는 긴 페이지를 탐색할 수 있는 원활한 사용자 환경을 제공할 수 있습니다.