Comment gérer la liaison de hachage d'ancrage dans AngularJS


318

Est-ce que l'un d'entre vous sait comment bien gérer la liaison de hachage d'ancrage dans AngularJS ?

J'ai le balisage suivant pour une simple page FAQ

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

Lorsque vous cliquez sur l'un des liens ci-dessus, AngularJS intercepte et m'achemine vers une page complètement différente (dans mon cas, une page de 404 car il n'y a pas d'itinéraires correspondant aux liens.)

Ma première pensée a été de créer un itinéraire correspondant " / faq /: chapitre " et dans le contrôleur correspondant, vérifier $routeParams.chapteraprès un élément correspondant, puis utiliser jQuery pour y faire défiler.

Mais AngularJS me chie encore une fois et fait quand même défiler vers le haut de la page.

Donc, quelqu'un ici a fait quelque chose de similaire dans le passé et connaît une bonne solution?

Edit: Passer à html5Mode devrait résoudre mes problèmes, mais nous devons en quelque sorte prendre en charge IE8 +, donc je crains que ce ne soit pas une solution acceptée: /


Je pense que angular suggère d'utiliser à la ng-href=""place.
ferroutage

10
Je pense que ng-href n'est applicable que si l'url contient des données dynamiques qui doivent être liées à un modèle ng. Je me demande un peu si vous attribuez un hashPrefix à locationProvider s'il ignorera les liens vers les ID: docs.angularjs.org/guide/dev_guide.services.$location
Adam

Adam a raison sur l'utilisation de ng-href.
Rasmus


C'est aussi un problème pour les nouveaux Angular: stackoverflow.com/questions/36101756/…
phil294

Réponses:


375

Vous cherchez $anchorScroll().

Voici la documentation (merde).

Et voici la source.

Fondamentalement, il vous suffit de l'injecter et de l'appeler dans votre contrôleur, et il vous fera défiler jusqu'à n'importe quel élément avec l'ID trouvé dans $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>

Voici un plongeur pour démontrer

EDIT: pour l'utiliser avec le routage

Configurez votre routage angulaire comme d'habitude, puis ajoutez simplement le code suivant.

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

et votre lien ressemblerait à ceci:

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

Voici un Plunker démontrant le défilement avec le routage et $ anchorScroll

Et encore plus simple:

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

et votre lien ressemblerait à ceci:

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

5
Un problème peut survenir lorsque vous ajoutez un routage: si ajouter ngView chaque changement du hachage de l'URL déclencherait le rechargement de l'itinéraire ... Dans votre exemple, il n'y a pas de routage et l'URL ne reflète pas l'élément actuel ... Mais merci de pointer sur $ anchorScroll
Valentyn Shybanov

1
@blesh, appeler location.hash (X) change la page puisque le routage contrôle les vues.
dsldsl

24
Cette solution provoque le rendu de toute mon application.

2
@dsldsl && @OliverJosephAsh: $ location.hash () ne rechargera pas la page. Si c'est le cas, il se passe autre chose. Voici le même plunk avec l'heure écrite pendant le chargement de la page, vous verrez que cela ne change pas Si vous voulez faire défiler jusqu'à une balise d'ancrage sur la page actuelle sans recharger l'itinéraire, vous feriez juste un lien régulier <a href="#foo">foo</a>. Mon exemple de code devait montrer le défilement vers un identifiant lors du changement de routage.
Ben Lesh

4
@blesh: Je vous recommande également de supprimer le hachage après avoir défilé jusqu'à la section souhaitée, de cette façon, l'URL n'est pas polluée par des éléments qui ne devraient vraiment pas être là. Utilisez ceci: $location.search('scrollTo', null)
kumarharsh

168

Dans mon cas, j'ai remarqué que la logique de routage se déclenchait si je modifiais le $location.hash(). L'astuce suivante a fonctionné ..

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

5
Merci pour cela, la logique de routage a absolument refusé de se comporter même lors de l'utilisation de la solution .run (...) de @ blesh, et cela le trie.
ljs

8
Votre astuce "sauver l'ancien hachage" a été une bouée de sauvetage absolue. Il empêche le rechargement de la page tout en gardant l'itinéraire propre. Idée géniale!
ThisLanham

2
Joli. Mais après avoir implémenté votre solution, l'URL ne met pas à jour la valeur de l'ID cible.
Mohamed Hussain

1
J'ai eu la même expérience que Mohamed ... Il a bien arrêté le rechargement mais il affiche l'itinéraire sans hash (et $ anchorScroll n'a eu aucun effet). 1.2.6 Hmmmm.
michael

3
J'utilise $location.hash(my_id); $anchorScroll; $location.hash(null). Il empêche le rechargement et je n'ai pas à gérer la oldvariable.
MFB

53

Il n'est pas nécessaire de modifier le routage ou tout autre élément à utiliser target="_self"lors de la création des liens

Exemple:

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

Et utilisez l' idattribut dans vos éléments html comme ceci:

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

Il n'est pas nécessaire d'utiliser ## comme indiqué / mentionné dans les commentaires ;-)


1
Cela n'a pas fonctionné pour moi, mais la solution ici a fonctionné: stackoverflow.com/a/19367249/633107
Splaktar

6
Merci pour cette solution. Mais target = "_ self" est suffisant. Pas besoin de doubler #
Christophe P

5
target = "_ self" est certainement la meilleure réponse (pas besoin de doubler #, comme l'a souligné Christophe P). Cela fonctionne peu importe si Html5Mode est activé ou désactivé.
newman

3
Simple et complet. A fonctionné pour moi sans avoir besoin d'ajouter encore une autre dépendance angulaire.
adeady

4
C'est la bonne solution. Pas besoin d'impliquer le service $ anchorScroll angulaire. Voir la documentation pour une balise: https://developer.mozilla.org/en/docs/Web/HTML/Element/a
Yiling

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

Impressionnant! De loin la solution la plus simple, mais une idée de comment créer un lien vers une ancre sur une page séparée? (ie / produits # livres)
8bithero

Je pense que c'est la même chose que la solution (/ products ## books) dans AngularJS
lincolnge

1
D'après mon expérience, href = "##" ne fonctionne que lorsque $ anchorScroll est injecté.
Brian Park

9
cela semble relativement simple mais cela ne fonctionne pas :-(
brykneval

4
J'ai ajouté target = "_ self" et cela a fonctionné comme un charme pour tout type de navigation dans la page (lire les curseurs, aller dans différentes sections, etc.). Merci de partager ce truc génial et simple.
Kumar Nitesh

19

Si vous connaissez toujours l'itinéraire, vous pouvez simplement ajouter l'ancre comme ceci:

href="#/route#anchorID

routeest l'itinéraire angulaire actuel et anchorIDcorrespond à <a id="anchorID">quelque part sur la page


1
Cela déclenche un changement de route AngularJS normal et est donc déconseillé. Dans mon cas, c'était très visuel depuis le rechargement des vidéos YouTube dans la page FAQ / Aide.
Robin Andersson

9
@ RobinWassén-Andersson en spécifiant reloadOnSearch: falsepour cet itinéraire dans votre configuration d'itinéraires, angular ne déclenchera pas de changement d'itinéraire et fera simplement défiler jusqu'à l'id. En combinaison avec l'itinéraire complet spécifié dans la abalise, je dirais que c'est la solution la plus simple et la plus directe.
Elise

Je vous remercie. Cela m'a aidé. Je n'utilise aucun itinéraire personnalisé dans mon application, donc faire un href = "# / # anchor-name" a très bien fonctionné!
Jordan

14

$anchorScroll fonctionne pour cela, mais il existe une bien meilleure façon de l'utiliser dans les versions plus récentes d'Angular.

Maintenant, $anchorScrollaccepte le hachage comme argument facultatif, vous n'avez donc pas à changer $location.hashdu tout. ( documentation )

C'est la meilleure solution car elle n'affecte pas du tout l'itinéraire. Je n'ai pu faire fonctionner aucune des autres solutions car j'utilise ngRoute et la route se rechargerait dès que j'aurais défini $location.hash(id), avant de $anchorScrollpouvoir faire sa magie.

Voici comment l'utiliser ... d'abord, dans la directive ou le contrôleur:

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

puis dans la vue:

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

De plus, si vous devez tenir compte d'une barre de navigation fixe (ou d'une autre interface utilisateur), vous pouvez définir le décalage pour $ anchorScroll 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;
});

Merci. Comment mettriez-vous en œuvre votre stratégie pour un lien de hachage combiné à un changement d'itinéraire? Exemple: cliquez sur cet élément de navigation, qui ouvre une vue différente et fait défiler vers le bas jusqu'à un spécifique iddans cette vue.
Kyle Vassella du

Essayez de harceler ... Si vous en avez l'occasion, pourriez-vous jeter un coup d'œil à ma question sur Stack? Je pense que votre réponse ici m'a rapproché, mais je ne peux tout simplement pas l'implémenter: stackoverflow.com/questions/41494330/… . Moi aussi j'utilise ngRoutela nouvelle version d'Angular.
Kyle Vassella

Je suis désolé de ne pas avoir essayé ce cas particulier ... mais avez-vous jeté un œil à $ location.search () ou $ routeParams ? Vous pourriez peut-être utiliser l'un ou l'autre lors de l'initialisation de votre contrôleur - si votre paramètre de recherche scrollTo est dans l'URL, le contrôleur pourrait utiliser $ anchorScroll comme ci-dessus pour faire défiler la page.
Rebecca

2
En passant l'ID directement à $ anchorScroll, mes itinéraires sont passés de quelque chose comme / contact # contact à juste / contact. Cela devrait être la réponse acceptée à mon humble avis.
RandomUs1r

12

C'était ma solution en utilisant une directive qui semble plus angulaire-y parce que nous avons affaire au DOM:

Plnkr ici

github

CODE

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>

J'ai utilisé le service $ anchorScroll. Pour contrer l'actualisation de la page qui accompagne le changement de hachage, j'ai continué et annulé l'événement locationChangeStart. Cela a fonctionné pour moi car j'avais une page d'aide connectée à un ng-switch et les rafraîchissements briseraient essentiellement l'application.


J'aime votre solution directive. Cependant, comment voulez-vous que vous vouliez charger une autre page et faire défiler jusqu'à l'emplacement de l'ancre en même temps. Sans angularjs, ce serait nominalement href = "location # hash". Mais votre directive empêche le rechargement de la page.
CMCDragonkai

@CMCDragonkai avec ma directive, je ne suis pas sûr car j'utilise l'appel à $ anchorScroll qui ne semble gérer que le défilement vers un élément actuellement sur la page. Vous devrez peut-être jouer avec $ location ou $ window pour obtenir quelque chose impliquant un changement de page.
KhalilRavanna

2
Vous devez vous désinscrire de l'événement locationChangeStart: var off = scope. $ On ('$ locationChangeStart', function (ev) {off (); ev.preventDefault ();});

Bonne prise @EugeneTskhovrebov, je suis allé de l'avant et j'ai ajouté cela à la réponse dans un montage.
KhalilRavanna

5

Essayez de définir un préfixe de hachage pour les itinéraires angulaires $locationProvider.hashPrefix('!')

Exemple complet:

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

Cela n'affecte pas le résultat. Ce serait doux cependant.
Rasmus

2
Êtes-vous sûr. Pourquoi ça ne marche pas? Si le préfixe de hachage est!, Le routage de hachage doit être la page #!. Par conséquent, AngularJS devrait détecter lorsqu'il ne s'agit que d'un #hash, il devrait ancrer le défilement automatiquement et fonctionner à la fois pour les URL en mode HTML5 et les URL en mode hachage.
CMCDragonkai

5

J'ai contourné cela dans la logique de l'itinéraire pour mon application.

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

1
Cela ne fonctionne pas: Erreur: [$ injector: modulerr] Échec de l'instanciation de l'angle du module en raison de: Erreur: 'gestionnaire' non valide dans when ()
geoidesic

5

Ceci est un ancien poste, mais j'ai passé beaucoup de temps à rechercher diverses solutions, donc je voulais en partager une plus simple. Le simple ajout target="_self"à la <a>balise l'a corrigé pour moi. Le lien fonctionne et m'amène au bon endroit sur la page.

Cependant, Angular injecte toujours un peu de bizarrerie avec le # dans l'URL, vous pouvez donc rencontrer des problèmes en utilisant le bouton de retour pour la navigation et autres après avoir utilisé cette méthode.


4

Il s'agit peut-être d'un nouvel attribut pour ngView, mais j'ai pu obtenir des liens de hachage d'ancrage avec lesquels angular-routeutiliser l' ngView autoscrollattribut et les «doubles hachages».

ngView (voir défilement automatique)

(Le code suivant a été utilisé avec une sangle angulaire)

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

3

Je pourrais faire ça comme ça:

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

2

Voici une sorte de solution de contournement en créant une directive personnalisée qui défilera jusqu'à l'élément spécifié (avec une "FAQ" codée en dur)

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


Cela fonctionne bien, mais c'est, comme vous l'avez dit, sale. Très sale. Voyons voir si quelqu'un d'autre peut trouver une solution plus jolie, ou je devrai y aller.
Rasmus

Angular a déjà intégré la fonctionnalité scrollTo via $anchorScroll, voir ma réponse.
Ben Lesh

Plunker changé pour être moins sale: il utilise $ location.path () donc il n'y a pas de "faq" codée en dur dans la source. Et aussi essayé d'utiliser $ anchorScroll, mais semble dû au routage cela ne fonctionne pas ...
Valentyn Shybanov

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

2

Si vous n'aimez pas utiliser, ng-clickvoici une autre solution. Il utilise un filterpour générer l'URL correcte en fonction de l'état actuel. Mon exemple utilise ui.router .

L'avantage est que l'utilisateur verra où le lien passe en survol.

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

Le filtre:

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

2

Ma solution avec ng-route était cette simple directive:

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

Le html ressemble à:

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

N'auriez-vous pas besoin de spécifier l'attribut comme scroll-to="yourid"et de nommer la directive scrollTo(et d'accéder à l'attribut comme attrs["scrollTo"]? De plus, sans inclusion explicite de jQuery, le gestionnaire doit être lié element.on('click', function (e) {..}).
Theodros Zelleke

1

Vous pouvez essayer d'utiliser anchorScroll .

Exemple

Le contrôleur serait donc:

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'identifiant de l'ancre:

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

1

J'essayais de faire défiler mon application angulaire jusqu'à un chargement d'opon d'ancrage et j'ai rencontré les règles de réécriture d'URL de $ routeProvider.

Après une longue expérimentation, je me suis installé sur ceci:

  1. enregistrer un gestionnaire d'événements document.onload à partir de la section .run () du module d'application Angular.
  2. dans le gestionnaire, découvrez ce que la balise d'ancrage d'origine était censée être en effectuant certaines opérations de chaîne.
  3. remplacez location.hash avec la balise d'ancrage supprimée (ce qui oblige $ routeProvider à la remplacer immédiatement avec sa règle "# /". Mais c'est très bien, car Angular est maintenant synchronisé avec ce qui se passe dans l'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();
			}
		}	 
 });


1

Je ne suis pas sûr à 100% si cela fonctionne tout le temps, mais dans mon application, cela me donne le comportement attendu.

Disons que vous êtes sur la page À PROPOS et que vous avez l'itinéraire suivant:

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

Maintenant, en vous 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>

En conclusion

L'inclusion du nom de la page avant l'ancre a fait l'affaire pour moi. Faites-moi part de vos pensées.

Inconvénient

Cela restituera la page, puis défilera jusqu'à l'ancre.

METTRE À JOUR

Une meilleure façon consiste à ajouter ce qui suit:

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

1

Obtenez facilement votre fonction de défilement. Il prend également en charge le défilement animé / lisse en tant que fonctionnalité supplémentaire. Détails pour la bibliothèque de défilement angulaire :

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

Bower :bower install --save angular-scroll

npm :npm install --save angular-scroll

Version minfied - seulement 9kb

Défilement fluide (défilement animé) - oui

Scroll Spy - oui

Documentation - excellente

Démo - http://oblador.github.io/angular-scroll/

J'espère que cela t'aides.


1

Sur la base de @Stoyan, j'ai trouvé la solution suivante:

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

0

Lors du changement d'itinéraire, il défile en haut de la page.

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

mettez ce code sur votre manette.


0

Dans mon esprit, @slugslog l'avait, mais je changerais une chose. J'utiliserais plutôt replace pour ne pas avoir à le remettre en place.

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

Recherche de documents pour la «méthode de remplacement»


0

Aucune des solutions ci-dessus ne fonctionne pour moi, mais je viens de l'essayer, et cela a fonctionné,

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

J'ai donc réalisé que je devais notifier la page pour commencer par la page d'index, puis utiliser l'ancre traditionnelle.


0

Parfois, dans angularjs, la navigation par hachage ne fonctionne pas et les bibliothèques javery bootstrap jquery utilisent largement ce type de navigation, pour le faire fonctionner, ajouter target="_self"à la balise d'ancrage. par exemple<a data-toggle="tab" href="#id_of_div_to_navigate" target="_self">



0

J'utilise AngularJS 1.3.15 et on dirait que je n'ai rien à faire de spécial.

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

Donc, ce qui suit fonctionne pour moi dans mon html:

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

Je n'ai pas du tout dû apporter de modifications à mon contrôleur ou à JavaScript.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.