Gestion du hachage d'ancre dans AngularJS

Naviguer dans des pages Web à l'aide d'ancres est une pratique courante, en particulier pour les longues pages comportant plusieurs sections. Cependant, dans les applications AngularJS, la gestion des liens d'ancrage peut être problématique.

Lorsque vous cliquez sur des liens d'ancrage dans AngularJS, le comportement par défaut est d'intercepter le clic et de rediriger l'utilisateur vers une autre page. Pour résoudre ce problème, AngularJS fournit une solution.

$anchorScroll()

Le service $anchorScroll() dans AngularJS est spécifiquement conçu pour gérer les liens de hachage d'ancre. Ce service vous permet de faire défiler jusqu'à un élément de la page actuelle en fonction de la valeur de hachage dans l'URL.

Pour utiliser $anchorScroll(), injectez-le simplement dans votre contrôleur et appelez-le si nécessaire. Le service prend un paramètre id facultatif qui spécifie l'élément vers lequel faire défiler. Si aucun identifiant n'est fourni, il défilera jusqu'à l'élément dont l'ID correspond à $location.hash().

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

Test/Foo

Approche simplifiée

Pour une approche encore plus simple, vous pouvez utiliser ce code modifié :

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();  
  });
});

Votre lien d'ancrage ressemblerait alors à ceci :

Test/Foo

En tirant parti de ces techniques, vous pouvez gérer en douceur les liens de hachage d'ancrage dans vos applications AngularJS, offrant ainsi une expérience utilisateur transparente pour naviguer dans de longues pages comportant plusieurs sections.