AngularJS アプリケーションでアンカー ハッシュ リンクを処理するには?

AngularJS でのアンカー ハッシュの処理

アンカーを使用して Web ページ内を移動することは、特に複数のセクションを持つ長いページの場合に一般的です。ただし、AngularJS アプリケーションでは、アンカー リンクの処理に問題が生じる可能性があります。

AngularJS でアンカー リンクをクリックすると、デフォルトの動作では、クリックが中断され、ユーザーが別のページにリダイレクトされます。この問題に対処するために、AngularJS は解決策を提供します。

$anchorScroll()

AngularJS の $anchorScroll() サービスは、アンカー ハッシュ リンクを処理するように特別に設計されています。このサービスを使用すると、URL のハッシュ値に基づいて現在のページの要素にスクロールできます。

$anchorScroll() を使用するには、それをコントローラーに挿入し、必要に応じて呼び出すだけです。このサービスは、スクロール先の要素を指定するオプションの id パラメーターを受け取ります。 ID が指定されていない場合は、$location.hash() に一致する ID を持つ要素までスクロールします。

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

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

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

$anchorScroll() によるルーティング

AngularJS ルーティング アプリケーションでは、 $anchorScroll() を使用するには、少し異なるアプローチが必要です。デフォルトでは、ルートが変更されると、AngularJS はページの先頭までスクロールします。これを防止してアンカー リンクのスクロールを有効にするには、次のコードを追加します:

<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 中国語 Web サイトの他の関連記事を参照してください。