¿Enlaces de anclaje en Angularjs?

¿Es posible usar enlaces de anclaje con Angularjs?

Es decir:

Top Middle Bottom 
...
...

Gracias

Hay algunas maneras de hacer esto, parece.

Opción 1: Angular nativo

Angular proporciona un servicio $anchorScroll , pero la documentación es muy escasa y no he podido hacer que funcione.

Consulte http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-id.html para obtener información sobre $anchorScroll .

Opción 2: Directiva personalizada / JavaScript nativo

Otra forma en que probé fue crear una directiva personalizada y usar el.scrollIntoView() . Esto funciona de manera bastante decente, básicamente haciendo lo siguiente en su función de enlace de directivas:

 var el = document.getElementById(attrs.href); el.scrollIntoView(); 

Sin embargo, parece un poco exagerado hacer ambas cosas cuando el navegador lo admite de manera nativa, ¿no?

Opción 3: Anulación angular / Navegador nativo

Si echas un vistazo a http://docs.angularjs.org/guide/dev_guide.services.$location y su sección de reescritura del enlace HTML, verás que los enlaces no se reescriben de la siguiente manera:

Enlaces que contienen elemento de destino

Ejemplo: link

Entonces, todo lo que tienes que hacer es agregar el atributo target a tus enlaces, así:

 Go to inpage section 

Angular se configura de forma predeterminada en el navegador y, dado que es un enlace de anclaje y no una url base diferente, el navegador se desplaza a la ubicación correcta, como se desee.

Fui con la opción 3 porque es mejor confiar en la funcionalidad del navegador nativo aquí, y nos ahorra tiempo y esfuerzo.

Tengo que tener en cuenta que después de un cambio exitoso de desplazamiento y hash, Angular hace un seguimiento y reescribe el hash a su estilo personalizado. Sin embargo, el navegador ya ha completado su negocio y está listo para comenzar.

No sé si eso responde su pregunta, pero sí, puede usar los enlaces de angularjs, tales como:

Hay un buen ejemplo en el sitio web de AngularJS:

http://docs.angularjs.org/api/ng.directive:ngHref

ACTUALIZACIÓN: La documentación de AngularJS era un poco oscura y no proporcionaba una buena solución para ella. ¡Lo siento!

Puede encontrar una mejor solución aquí: Cómo manejar el enlace hash de anclaje en AngularJS

Podría intentar usar anchorScroll .

Ejemplo

Entonces el controlador sería:

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

Y la vista:

 Scroll to #foo 

… y ningún secreto para la identificación de anclaje:

 
This is #foo

$ anchorScroll es sin duda la respuesta a esto, pero hay una forma mucho mejor de usarlo en versiones más recientes de Angular.

Ahora, $ anchorScroll acepta el hash como un argumento opcional, por lo que no tiene que cambiar $ location.hash en absoluto. ( documentación )

Esta es la mejor solución porque no afecta la ruta en absoluto. No pude hacer funcionar ninguna de las otras soluciones porque estoy usando ngRoute y la ruta se volvería a cargar tan pronto como configuré $location.hash(id) , antes de que $ anchorScroll pudiera hacer su magia.

Aquí se explica cómo usarlo … primero, en la directiva o el controlador:

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

y luego en la vista:

 Text 

Además, si necesita representar una barra de navegación fija (u otra IU), puede establecer el desplazamiento para $ anchorScroll de esta manera (en la función de ejecución del módulo principal):

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

Tuve el mismo problema, pero esto funcionó para mí:

  

Funciona para mi:

   

Solo necesita agregar target = “_ self” a su enlace

ex. Services

O simplemente puedes escribir:

ng-href="\#yourAnchorId"

Tenga en cuenta la barra invertida delante del símbolo hash

Si usa SharePoint y angular, hágalo como se muestra a continuación:

  

donde LinkTo y Title es la columna de SharePoint.

La mejor opción para mí fue crear una directiva para hacer el trabajo, porque $location.hash() y $anchorScroll() secuestran la URL creando muchos problemas para mi enrutamiento SPA.

 MyModule.directive('myAnchor', function() { return { restrict: 'A', require: '?ngModel', link: function(scope, elem, attrs, ngModel) { return elem.bind('click', function() { //other stuff ... var el; el = document.getElementById(attrs['myAnchor']); return el.scrollIntoView(); }); } }; }); 

También puede navegar a la identificación HTML desde el controlador

 $location.hash('id_in_html');