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