意図しないルーティングを行わずにAngularJSでアンカーハッシュリンクを処理する方法は?

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

AngularJS を使用する場合、アンカー ハッシュ リンクの処理は困難な場合があります。アンカー ハッシュ リンクを使用すると、ユーザーは特定のセクションにつながるリンクをクリックしてページ内を移動できます。ただし、AngularJS では、そのようなリンクが意図しないルーティング動作を引き起こすことがよくあります。

この問題は、AngularJS がアンカー ハッシュ リンクをインターセプトし、別のページにルーティングしようとすると発生します。この問題は、特にページ内ナビゲーションを必要とするアプリケーションにとってイライラさせられます。

解決策: $anchorScroll() の使用

この問題の解決策は $ AngularJS によって提供されるanchorScroll() サービス。このサービスを使用すると、ID に基づいてページ内の特定の要素までスムーズにスクロールできます。

実装

$anchorScroll() を実装するには、次の手順に従います。

1. $anchorScroll() をコントローラーに挿入します。
2. ID パラメーターを受け取る関数を定義します。
3. 指定された ID と一致するように $location.hash を更新します。
4. $anchorScroll() を呼び出してスクロールを実行します。

例:

<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() アプローチを次のように拡張できます:

1. 通常どおりルーティングを設定します。
2. '$routeChangeSuccess' イベントのリスナーを追加します。
3. イベント ハンドラー内で、$location.hash を指定された "scrollTo" パラメーターに更新します。
4. $anchorScroll() を呼び出して実行します。

簡略化されたアプローチ

より単純な解決策として、'$routeChangeSuccess' イベントをリッスンし、アンカー ハッシュが存在するかどうかを確認できます。 :

<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でアンカーハッシュリンクを処理する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。