Como lidar com links de hash âncora no AngularJS

Algum de vocês sabe como lidar bem com links de hash de âncora no AngularJS ?

Eu tenho a seguinte marcação para uma página de FAQ simples

<a href="#faq-1">Question 1</a>
<a href="#faq-2">Question 2</a>
<a href="#faq-3">Question 3</a>

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="fa1-3">Question 3</h3>

Ao clicar em qualquer um dos links acima, o AngularJS intercepta e direciona-me para uma página completamente diferente (no meu caso, uma página 404, pois não há rotas correspondentes aos links).

Meu primeiro pensamento foi criar uma rota correspondente a " / faq /: chapter " e, no controlador correspondente, verificar $routeParams.chapterapós um elemento correspondente e, em seguida, usar o jQuery para rolar para baixo.

Mas então o AngularJS caga em mim novamente e apenas rola para o topo da página de qualquer maneira.

Então, alguém aqui fez algo semelhante no passado e conhece uma boa solução para isso?

Edit: Mudar para html5Mode deve resolver meus problemas, mas meio que precisamos oferecer suporte ao IE8 + de qualquer maneira, por isso, temo que não seja uma solução aceita: /

Você está procurando $anchorScroll().

Aqui está a documentação (de baixa qualidade).

E aqui está a fonte.

Basicamente, você apenas injeta e chama no seu controlador, e ele irá rolar para qualquer elemento com o ID encontrado em $location.hash()

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>

Aqui está um desentupidor para demonstrar

EDIT: para usar isso com roteamento

Configure seu roteamento angular como de costume e adicione o código a seguir.

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

e seu link ficaria assim:

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

Aqui está um Plunker demonstrando rolagem com roteamento e $ anchorScroll

E ainda mais simples:

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

e seu link ficaria assim:

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

No meu caso, notei que a lógica de roteamento estava ativando se eu modificasse o $location.hash(). O seguinte truque funcionou ..

$scope.scrollTo = function(id) {
    var old = $location.hash();
    $location.hash(id);
    $anchorScroll();
    //reset to old to keep any additional routing logic from kicking in
    $location.hash(old);
};

Não há necessidade de alterar nenhum roteamento ou qualquer outra coisa, basta usar target="_self" ao criar os links

Exemplo:

<a href="#faq-1" target="_self">Question 1</a>
<a href="#faq-2" target="_self">Question 2</a>
<a href="#faq-3" target="_self">Question 3</a>

E use o idatributo em seus elementos html como este:

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="faq-3">Question 3</h3>

Não há necessidade de usar ## como apontado / mencionado nos comentários ;-)

<a href="##faq-1">Question 1</a>
<a href="##faq-2">Question 2</a>
<a href="##faq-3">Question 3</a>

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="faq-3">Question 3</h3>

Se você sempre conhece a rota, pode simplesmente acrescentar a âncora assim:

href="#/route#anchorID

onde routeé a rota angular atual e anchorIDcorresponde a <a id="anchorID">algum lugar da página

$anchorScroll funciona para isso, mas há uma maneira muito melhor de usá-lo nas versões mais recentes do Angular.

Agora, $anchorScrollaceita o hash como um argumento opcional, para que você não precise alterar $location.hashnada. ( documentação )

Esta é a melhor solução porque não afeta a rota. Não consegui que nenhuma das outras soluções funcionasse porque estou usando o ngRoute e a rota seria recarregada assim que eu definia $location.hash(id), antes que $anchorScrollpudesse fazer sua mágica.

Aqui está como usá-lo ... primeiro, na diretiva ou controlador:

$scope.scrollTo = function (id) {
  $anchorScroll(id);  
}

e depois na visualização:

<a href="" ng-click="scrollTo(id)">Text</a>

Além disso, se você precisar contabilizar uma barra de navegação fixa (ou outra interface do usuário), poderá definir o deslocamento para $ anchorScroll assim (na função de execução do módulo principal):

.run(function ($anchorScroll) {
   //this will make anchorScroll scroll to the div minus 50px
   $anchorScroll.yOffset = 50;
});

Esta foi a minha solução usando uma diretiva que parece mais angular porque estamos lidando com o DOM:

Plnkr aqui

github

CÓDIGO

angular.module('app', [])
.directive('scrollTo', function ($location, $anchorScroll) {
  return function(scope, element, attrs) {

    element.bind('click', function(event) {
        event.stopPropagation();
        var off = scope.$on('$locationChangeStart', function(ev) {
            off();
            ev.preventDefault();
        });
        var location = attrs.scrollTo;
        $location.hash(location);
        $anchorScroll();
    });

  };
});

HTML

<ul>
  <li><a href="" scroll-to="section1">Section 1</a></li>
  <li><a href="" scroll-to="section2">Section 2</a></li>
</ul>

<h1 id="section1">Hi, I'm section 1</h1>
<p>
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. 
 Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. 
Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. 
Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
</p>

<h1 id="section2">I'm totally section 2</h1>
<p>
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. 
 Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. 
Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. 
Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
</p>

Eu usei o serviço $ anchorScroll. Para neutralizar a atualização de página que acompanha a alteração de hash, fui adiante e cancelei o evento locationChangeStart. Isso funcionou para mim porque eu tinha uma página de ajuda conectada a um comutador de ng e as atualizações quebrariam essencialmente o aplicativo.

Tente definir um prefixo de hash para rotas angulares $locationProvider.hashPrefix('!')

Exemplo completo:

angular.module('app', [])
  .config(['$routeProvider', '$locationProvider', 
    function($routeProvider, $locationProvider){
      $routeProvider.when( ... );
      $locationProvider.hashPrefix('!');
    }
  ])

Eu contornei isso na lógica de rota do meu aplicativo.

function config($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: '/partials/search.html',
      controller: 'ctrlMain'
    })
    .otherwise({
      // Angular interferes with anchor links, so this function preserves the
      // requested hash while still invoking the default route.
      redirectTo: function() {
        // Strips the leading '#/' from the current hash value.
        var hash = '#' + window.location.hash.replace(/^#\//g, '');
        window.location.hash = hash;
        return '/' + hash;
      }
    });
}

Este é um post antigo, mas passei muito tempo pesquisando várias soluções, então queria compartilhar mais um. Apenas adicionando target="_self"ao<a> tag corrigiu isso para mim. O link funciona e me leva ao local apropriado na página.

No entanto, o Angular ainda injeta alguma estranheza com o # no URL, para que você possa ter problemas ao usar o botão Voltar para navegação e outros itens depois de usar esse método.

Esse pode ser um novo atributo para o ngView, mas eu consegui obter links de hash âncora para trabalhar angular-routeusando ongView autoscroll atributo e 'double-hashes'.

ngView (consulte rolagem automática)

(O código a seguir foi usado com fita angular)

<!-- use the autoscroll attribute to scroll to hash on $viewContentLoaded -->    
<div ng-view="" autoscroll></div>

<!-- A.href link for bs-scrollspy from angular-strap -->
<!-- A.ngHref for autoscroll on current route without a location change -->
<ul class="nav bs-sidenav">
  <li data-target="#main-html5"><a href="#main-html5" ng-href="##main-html5">HTML5</a></li>
  <li data-target="#main-angular"><a href="#main-angular" ng-href="##main-angular" >Angular</a></li>
  <li data-target="#main-karma"><a href="#main-karma" ng-href="##main-karma">Karma</a></li>
</ul>

Eu poderia fazer assim:

<li>
<a href="#/#about">About</a>
</li>

Aqui está uma solução alternativa suja, criando uma diretiva personalizada que rolará para o elemento especificado (com "faq" codificado)

app.directive('h3', function($routeParams) {
  return {
    restrict: 'E',
    link: function(scope, element, attrs){        
        if ('faq'+$routeParams.v == attrs.id) {
          setTimeout(function() {
             window.scrollTo(0, element[0].offsetTop);
          },1);        
        }
    }
  };
});

http://plnkr.co/edit/Po37JFeP5IsNoz5ZycFs?p=preview

<a href="/#/#faq-1">Question 1</a>
<a href="/#/#faq-2">Question 2</a>
<a href="/#/#faq-3">Question 3</a>

Se você não gosta de usar, ng-clickaqui está uma solução alternativa. Ele usa a filterpara gerar a URL correta com base no estado atual. Meu exemplo usa ui.router .

O benefício é que o usuário verá onde o link fica pairando.

<a href="{{ 'my-element-id' | anchor }}">My element</a>

O filtro:

.filter('anchor', ['$state', function($state) {
    return function(id) {
        return '/#' + $state.current.url + '#' + id;
    };
}])

Minha solução com ng-route foi esta diretiva simples:

   app.directive('scrollto',
       function ($anchorScroll,$location) {
            return {
                link: function (scope, element, attrs) {
                    element.click(function (e) {
                        e.preventDefault();
                        $location.hash(attrs["scrollto"]);
                        $anchorScroll();
                    });
                }
            };
    })

O html é parecido com:

<a href="" scrollTo="yourid">link</a>

Você pode tentar usar o anchorScroll .

Exemplo

Portanto, o controlador seria:

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

E a vista:

<a href="" ng-click="scrollTo('foo')">Scroll to #foo</a>

... e nenhum segredo para o ID da âncora:

<div id="foo">
  This is #foo
</div>

Eu estava tentando fazer meu aplicativo Angular rolar para um carregamento de âncora e ver as regras de reescrita de URL de $ routeProvider.

Após longa experimentação, decidi sobre isso:

1. registre um manipulador de eventos document.onload na seção .run () do módulo de aplicativo Angular.
2. no manipulador, descubra o que o original possui tag de âncora, executando algumas operações de string.
3. override location.hash com a tag de âncora despojada (que faz com que $ routeProvider a substitua imediatamente novamente com sua regra "# /". Mas tudo bem, porque o Angular agora está sincronizado com o que está acontecendo na URL 4) $ anchorScroll ().

angular.module("bla",[]).}])
.run(function($location, $anchorScroll){
         $(document).ready(function() {
	 if(location.hash && location.hash.length>=1)    		{
			var path = location.hash;
			var potentialAnchor = path.substring(path.lastIndexOf("/")+1);
			if ($("#" + potentialAnchor).length > 0) {   // make sure this hashtag exists in the doc.                          
			    location.hash = potentialAnchor;
			    $anchorScroll();
			}
		}	 
 });

Não tenho 100% de certeza se isso funciona o tempo todo, mas no meu aplicativo isso me dá o comportamento esperado.

Digamos que você esteja na página SOBRE e tenha a seguinte rota:

yourApp.config(['$routeProvider', 
    function($routeProvider) {
        $routeProvider.
            when('/about', {
                templateUrl: 'about.html',
                controller: 'AboutCtrl'
            }).
            otherwise({
                redirectTo: '/'
            });
        }
]);

Agora, no seu HTML

<ul>
    <li><a href="#/about#tab1">First Part</a></li>
    <li><a href="#/about#tab2">Second Part</a></li>
    <li><a href="#/about#tab3">Third Part</a></li>                      
</ul>

<div id="tab1">1</div>
<div id="tab2">2</div>
<div id="tab3">3</div>

Em conclusão

Incluir o nome da página antes da âncora fez o truque para mim. Deixe-me saber sobre seus pensamentos.

Desvantagem

Isso renderizará novamente a página e depois role para a âncora.

ATUALIZAR

Uma maneira melhor é adicionar o seguinte:

<a href="#tab1" onclick="return false;">First Part</a>

Obtenha seu recurso de rolagem facilmente. Ele também suporta rolagem Animated / Smooth como um recurso adicional. Detalhes para a biblioteca de rolagem angular :

Github - https://github.com/oblador/angular-scroll

Bower :bower install --save angular-scroll

npm :npm install --save angular-scroll

Versão Minfied - apenas 9kb

Rolagem suave (rolagem animada) - sim

Scroll Spy - sim

Documentação - excelente

Demonstração - http://oblador.github.io/angular-scroll/

Espero que isto ajude.

Baseado em @Stoyan, eu vim com a seguinte solução:

app.run(function($location, $anchorScroll){
    var uri = window.location.href;

    if(uri.length >= 4){

        var parts = uri.split('#!#');
        if(parts.length > 1){
            var anchor = parts[parts.length -1];
            $location.hash(anchor);
            $anchorScroll();
        }
    }
});

Na mudança de rota, ele rolará para o topo da página.

 $scope.$on('$routeChangeSuccess', function () {
      window.scrollTo(0, 0);
  });

coloque esse código no seu controlador.

Na minha opinião, o @slugslog tinha, mas eu mudaria uma coisa. Eu usaria substituir, para que você não precise configurá-lo novamente.

$scope.scrollTo = function(id) {
    var old = $location.hash();
    $location.hash(id).replace();
    $anchorScroll();
};

Documentos Pesquisa por "Substituir método"

Nenhuma das soluções acima funciona para mim, mas tentei isso e funcionou,

<a href="#/#faq-1">Question 1</a>

Então percebi que precisava notificar a página para começar com a página de índice e depois usar a âncora tradicional.

Em algum momento, a navegação por hash do aplicativo angularjs não funciona e as bibliotecas jquery javascript de bootstrap fazem uso extensivo desse tipo de navegação, para que ele funcione e seja adicionado target="_self"à tag anchor. por exemplo<a data-toggle="tab" href="#id_of_div_to_navigate" target="_self">

Consulte https://code.angularjs.org/1.4.10/docs/api/ngRoute/provider/ $ routeProvider

[reloadOnSearch = true] - {boolean =} - recarrega a rota quando apenas $ location.search () ou $ location.hash () são alterados.

Definir isso como falso fez o truque sem todas as opções acima para mim.

Estou usando o AngularJS 1.3.15 e parece que não preciso fazer nada de especial.

https://code.angularjs.org/1.3.15/docs/api/ng/provider/ $ anchorScrollProvider

Então, o seguinte funciona para mim no meu html:

<ul>
  <li ng-repeat="page in pages"><a ng-href="#{{'id-'+id}}">{{id}}</a>
  </li>
</ul>
<div ng-attr-id="{{'id-'+id}}" </div>

Não precisei fazer nenhuma alteração no meu controlador ou JavaScript.