"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Como lidar com links de hash de âncora em aplicativos AngularJS?

Como lidar com links de hash de âncora em aplicativos AngularJS?

Publicado em 2024-11-08
Navegar:505

How to Handle Anchor Hash Linking in AngularJS Applications?

Manipulação de hash de âncora em AngularJS

Navegar por páginas da web usando âncoras tem sido uma prática comum, especialmente para páginas longas com múltiplas seções. No entanto, em aplicativos AngularJS, o manuseio do link âncora pode ser problemático.

Ao clicar em links âncora no AngularJS, o comportamento padrão é interceptar o clique e redirecionar o usuário para uma página diferente. Para resolver esse problema, o AngularJS fornece uma solução.

$anchorScroll()

O serviço $anchorScroll() no AngularJS é projetado especificamente para lidar com links de hash de âncora. Este serviço permite que você role até um elemento na página atual com base no valor de hash na URL.

Para usar $anchorScroll(), simplesmente injete-o em seu controlador e chame-o quando necessário. O serviço utiliza um parâmetro id opcional que especifica o elemento para o qual rolar. Se nenhum ID for fornecido, ele irá rolar para o elemento com o ID correspondente a $location.hash().

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

Test/Foo

Abordagem Simplificada

Para uma abordagem ainda mais simples, você pode usar este modificado código:

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

Seu link âncora ficaria assim:

Test/Foo

Ao aproveitar essas técnicas, você pode lidar facilmente com links de hash de âncora em seus aplicativos AngularJS, proporcionando uma experiência de usuário perfeita para navegar em páginas longas com múltiplas seções.

Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3