如何使錨點連結與 AngularJS 路由無縫配合？

在AngularJS 中無縫地導航錨點

背景：

由於其預設值，在AngularJS 中導航錨點哈希鏈結可能會很棘手路由機制。當點擊錨連結導致 AngularJS 路由到不同頁面而不是平滑滾動到現有頁面中的預期元素時，就會出現此問題。

解決方案：使用 $anchorScroll()

為了解決這個問題，AngularJS 提供了寶貴的 $anchorScroll() 服務。該服務允許開發人員根據 ID 屬性手動捲動到特定元素。透過利用此功能，您可以控制錨連結的滾動行為並輕鬆在同一頁面內導航。

控制器中的實作：

使用 $anchorScroll() ，將其註入控制器並定義一個將所需元素 ID 作為參數的函數。在此函數中，更新 $location.hash() 以符合目標元素的 ID，然後呼叫 $anchorScroll()。

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

用法：

地點HTML 標記中的錨定連結並將其綁定到scrollTo() 函數。單擊時，此連結將滾動到頁面上的相應元素。

<a ng-click="scrollTo('foo')">Foo</a>
<div id="foo">Here you are</div>

與 Angular 路由整合：

使此解決方案與 Angular 結合使用路由，將以下程式碼新增至您的運行區塊。此程式碼偵聽路線更改，並在成功更改後捲動至 URL 中的scrollTo參數指定的元素。

app.run(function($rootScope, $location, $anchorScroll, $routeParams) {
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    $location.hash($routeParams.scrollTo);
    $anchorScroll();  
  });
});

簡化方法：

對於更簡單的解決方案，您可以修改運行區塊來處理所有雜湊變更。這將滾動到 ID 與哈希值匹配的任何元素。

app.run(function($rootScope, $location, $anchorScroll) {
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    if($location.hash()) $anchorScroll();  
  });
});

以上是如何使錨點連結與 AngularJS 路由無縫配合？的詳細內容。更多資訊請關注PHP中文網其他相關文章！