Les onglets d'amorçage avec basculement des données provoquent le rechargement dans angularjs
Je viens de migrer vers AngularJS 1.2. Et je me suis rendu compte que tous mes éléments de menu/navigation qui étaient configurés avec basculement de données, par exemple:
<li><a href="#additionalSelection" data-toggle="tab">Additional Selection</a></li>
ne fonctionnent plus. Ils devraient basculer l'élément avec id = "additionalSelection" - et c'est ainsi que Angular & Bootstrap a fonctionné lorsque j'utilisais la version 1.0.8 d'Angular).
Mais maintenant, quand je clique sur l'élément d'ancrage, Angular intercepte ce clic et essaie d'aller sur la route additionalSelection et il provoque l'actualisation de la page ...
Y a-t-il un moyen de le réparer?
La solution est aussi simple que de remplacer l'attribut href par data-target. Cela résout le problème:
<li><a data-target="#additionalSelection" data-toggle="tab">Additional Selection</a></li>
Comme l'a souligné dragonfly, data-target fonctionne bien au lieu de href.
Il y a une petite différence en CSS. Lorsque data-target est utilisé vs href, le curseur n'est plus un pointeur. Si vous ne souhaitez pas ajouter de CSS supplémentaire, vous pouvez procéder comme suit:
<a href="#additionalSelection" data-toggle="tab" onclick="return false;">Selection</a>
Ce n'est qu'une suggestion, pas une solution élégante. Mais si vous souhaitez utiliser href pour une raison quelconque, ajoutez
onclick="return false;"
Remplacez simplement l'attribut href de data-target
<li><a data-target="#switchTabs" data-toggle="tab">Tabs</a></li>
La solution préservant le curseur (tout en s'appuyant sur data-target au lieu de href pour naviguer) est:
<li><a href="" data-target="#additionalSelection" data-toggle="tab">Additional Selection</a></li>
l'ajout de href fait basculer le curseur dans la main, mais le laisser vide comme "" ne provoque aucun rechargement de page.