Comment faire fonctionner les liens d'ancrage de manière transparente avec le routage AngularJS ?

Naviguer facilement dans les ancres dans AngularJS

Contexte :

La navigation dans les liens de hachage d'ancre peut être délicate dans AngularJS en raison de sa valeur par défaut mécanisme de routage. Ce problème survient lorsque le fait de cliquer sur un lien d'ancrage entraîne un routage AngularJS vers une autre page au lieu d'un défilement fluide jusqu'à l'élément souhaité dans la page existante.

Solution : utilisation de $anchorScroll()

Pour résoudre ce problème, AngularJS fournit le précieux service $anchorScroll(). Ce service permet aux développeurs de faire défiler manuellement jusqu'à des éléments spécifiques en fonction de leurs attributs d'ID. En tirant parti de cette fonctionnalité, vous pouvez contrôler le comportement de défilement des liens d'ancrage et naviguer sans effort dans la même page.

Implémentation dans Controller :

Pour utiliser $anchorScroll() , injectez-le dans votre contrôleur et définissez une fonction qui prend l'ID d'élément souhaité comme argument. Dans cette fonction, mettez à jour $location.hash() pour qu'il corresponde à l'ID de l'élément cible, puis invoquez $anchorScroll().

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

Utilisation :

Place un lien d'ancrage dans votre balisage HTML et liez-le à la fonction scrollTo(). Lorsque vous cliquez dessus, ce lien défilera jusqu'à l'élément correspondant sur la page.

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

Intégration avec Angular Routing :

Pour que cette solution fonctionne en conjonction avec Angular routage, ajoutez le code suivant à votre bloc d'exécution. Ce code écoute les modifications d'itinéraire et, en cas de modification réussie, fait défiler jusqu'à l'élément spécifié par le paramètre scrollTo dans l'URL.

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

Approche simplifiée :

Pour une solution encore plus simple, vous pouvez modifier le bloc run pour gérer toutes les modifications de hachage. Cela fera défiler jusqu'à n'importe quel élément avec un identifiant correspondant à la valeur de hachage.

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

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!