Les liens d'ancrage dans Angularjs?

Je ne sais pas si cela répond à votre question, mais oui, vous pouvez utiliser des liens angularjs, tels que:

<a ng-href="http://www.gravatar.com/avatar/{{hash}}"/>

il y a un bon exemple sur le site D'AngularJS:

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

mise à jour: la documentation D'AngularJS était un peu obscure et n'offrait pas une bonne solution. Désolé!

vous pouvez trouver une meilleure solution ici: comment manipuler la liaison de hachage d'ancrage dans AngularJS

vous pouvez essayer d'utiliser anchorScroll .

exemple

donc le contrôleur serait:

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

et la vue:

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

...et pas de secret pour l'anchor id:

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

$ anchorScroll est en effet la réponse à cela, mais il ya une bien meilleure façon de l'utiliser dans les versions plus récentes D'Angular.

maintenant, $ anchorScroll accepte le hachage comme argument optionnel, donc vous n'avez pas à changer $location.de hachage. ( documentation )

C'est la meilleure solution car elle n'affecte pas la route du tout. Je n'ai pas pu faire fonctionner les autres solutions parce que j'utilise ngRoute et le route rechargerait dès que j'aurais mis $location.hash(id) , avant que $anchorScroll ne puisse faire sa magie.

Voici comment l'utiliser... premièrement, dans la directive ou le contrôleur:

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

et puis dans la vue:

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

aussi, si vous avez besoin de tenir compte d'une barre de navigation fixe (ou D'une autre interface utilisateur), vous pouvez définir l'offset pour $ancherscroll comme ceci (dans la fonction d'exécution du module principal):

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

j'ai eu le même problème, mais cela a fonctionné pour moi:

<a ng-href="javascript:void(0);#tagId"></a>

Fonctionne pour moi:

 <a onclick='return false;' href="" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" ng-href="#profile#collapse{{$index}}"> blalba </a>

il vous suffit d'ajouter target="_self" à votre lien

ex. <a href="#services" target="_self">Services</a>

ou vous pouvez simplement écrire:

ng-href="\#yourAnchorId"

s'il vous Plaît notez la barre oblique inverse devant le symbole dièse

si vous utilisez SharePoint et angular puis le faire comme ci-dessous:

<a ng-href="{{item.LinkTo.Url}}" target="_blank" ng-bind="item.Title;" ></a> 

où LinkTo et le titre est la colonne SharePoint.

Le meilleur choix pour moi était de créer une directive pour faire le travail, parce que $location.hash() et $anchorScroll() détourner L'URL créant beaucoup de problèmes à mon itinéraire 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();
      });      
    }
  };
});

vous pouvez également naviguer à L'id HTML à partir de l'intérieur du contrôleur

$location.hash('id_in_html');