Comment puis-je implémenter une liaison de hachage d'ancrage fluide dans les applications AngularJS ?

Gestion des liens de hachage d'ancrage dans AngularJS

Si vous rencontrez des problèmes avec les liens de hachage d'ancrage dans AngularJS, une solution simple est disponible : $ AnchorScroll().

AngularJS fournit le service $anchorScroll(), qui vous permet de faire défiler facilement jusqu'à n'importe quel élément avec un ID trouvé dans $location.hash(). Voici comment vous pouvez l'utiliser :

<code class="javascript">app.controller('TestCtrl', function($scope, $location, $anchorScroll) {
   $scope.scrollTo = function(id) {
      $location.hash(id);
      $anchorScroll();
   }
});</code>

Dans votre balisage, vous pouvez ensuite utiliser la directive ng-click pour déclencher l'action de défilement :

<code class="html"><a ng-click="scrollTo('foo')">Foo</a>

<div id="foo">Here you are</div></code>

Intégration avec AngularJS Routage

Pour utiliser $anchorScroll() avec le routage AngularJS, suivez ces étapes :

1. Configurez le routage comme vous le feriez normalement.
2. Ajoutez le code suivant :

<code class="javascript">app.run(function($rootScope, $location, $anchorScroll, $routeParams) {
  //when the route is changed scroll to the proper element.
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    $location.hash($routeParams.scrollTo);
    $anchorScroll();  
  });
});</code>

Voici un exemple de lien avec routage :

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

Pour une approche encore plus simple, vous pouvez utilisez ce code :

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

Et le lien correspondant :

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

Avec ces solutions, vous pouvez créer un lien transparent vers des ancres et faire défiler jusqu'au contenu correspondant dans votre application AngularJS.

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!