Comment gérer les liens de hachage d'ancre dans AngularJS sans routage involontaire ?

Gestion des liens de hachage d'ancre dans AngularJS

Lorsque vous travaillez avec AngularJS, la gestion des liens de hachage d'ancre peut être difficile. Les liens de hachage d'ancrage permettent aux utilisateurs de naviguer dans une page en cliquant sur des liens menant à des sections spécifiques. Cependant, dans AngularJS, de tels liens conduisent souvent à un comportement de routage involontaire.

Le problème survient lorsque AngularJS intercepte le lien de hachage d'ancrage et tente d'acheminer vers une autre page. Ce problème est frustrant, en particulier pour les applications qui nécessitent une navigation dans la page.

La solution : utiliser $anchorScroll()

La solution à ce problème réside dans le $ Service AnchorScroll() fourni par AngularJS. Ce service vous permet de faire défiler en douceur jusqu'à un élément spécifique dans une page en fonction de son identifiant.

Implémentation

Pour implémenter $anchorScroll(), suivez ces étapes :

1. Injectez $anchorScroll() dans votre contrôleur.
2. Définissez une fonction qui reçoit un paramètre ID.
3. Mettez à jour le $location.hash pour qu'il corresponde à l'ID fourni.
4. Invoquez $anchorScroll() pour effectuer le défilement.

Exemple :

<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>

Utilisation de $anchorScroll() with Routing

Dans les scénarios impliquant le routage AngularJS, vous pouvez étendre l'approche $anchorScroll() comme suit :

1. Configurez votre routage comme d'habitude.
2. Ajoutez un écouteur pour l'événement '$routeChangeSuccess'.
3. Dans le gestionnaire d'événements, mettez à jour le $location.hash avec le paramètre "scrollTo" spécifié.
4. Invoquez $anchorScroll() pour effectuer le défilement.

Approche simplifiée

Pour une solution plus simple, vous pouvez écouter l'événement '$routeChangeSuccess' et vérifier si un hachage d'ancre est présent :

<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>

Avec cette modification, vos liens peuvent simplement inclure un hachage d'ancre :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!