AngularJS 애플리케이션에서 원활한 앵커 해시 연결을 어떻게 구현할 수 있나요?

AngularJS에서 앵커 해시 연결 처리

AngularJS에서 앵커 해시 연결 문제에 직면한 경우 다음과 같은 간단한 해결 방법을 사용할 수 있습니다. anchorScroll().

AngularJS는 $location.hash()에 있는 ID를 가진 모든 요소로 쉽게 스크롤할 수 있는 $anchorScroll() 서비스를 제공합니다. 사용 방법은 다음과 같습니다.

<code class="javascript">app.controller('TestCtrl', function($scope, $location, $anchorScroll) {
   $scope.scrollTo = function(id) {
      $location.hash(id);
      $anchorScroll();
   }
});</code>

마크업에서 ng-click 지시문을 사용하여 스크롤 작업을 실행할 수 있습니다.

<code class="html"><a ng-click="scrollTo('foo')">Foo</a>

<div id="foo">Here you are</div></code>

AngularJS와 통합 라우팅

AngularJS 라우팅과 함께 $anchorScroll()을 사용하려면 다음 단계를 따르세요.

1. 라우팅을 구성 평소처럼
2. 다음 코드를 추가하세요.

<code class="javascript">app.run(function($rootScope, $location, $anchorScroll, $routeParams) {
  //when the route is changed scroll to the proper element.
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    $location.hash($routeParams.scrollTo);
    $anchorScroll();  
  });
});</code>

다음은 라우팅이 포함된 예제 링크입니다.

<code class="html"><a href="#/test?scrollTo=foo">Test/Foo</a></code>

더 간단한 접근 방식을 위해 다음을 수행할 수 있습니다. 다음 코드를 사용하세요.

<code class="javascript">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();  
  });
});</code>

해당 링크:

<code class="html"><a href="#/test#foo">Test/Foo</a></code>

이러한 솔루션을 사용하면 앵커에 원활하게 연결하고 AngularJS 애플리케이션 내에서 해당 콘텐츠로 스크롤할 수 있습니다.

위 내용은 AngularJS 애플리케이션에서 원활한 앵커 해시 연결을 어떻게 구현할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!