Bootstrap onglets avec le data-toggle cause de rechargement en angularjs

Je viens de migré à AngularJS 1.2. Et j'ai réalisé que tous mes menus/éléments de navigation qui ont été configurés avec des données de la bascule, par exemple:

<li><a href="#additionalSelection" data-toggle="tab">Additional Selection</a></li>

ne sont pas de travail, pas plus. Ils devraient basculer élément avec id="additionalSelection" - et c'est de cette façon Angulaire & Bootstrap a travaillé quand j'utilisais la version 1.0.8 de Anguleux.

Mais maintenant, quand je clique sur l'élément d'ancrage, Angulaire intercepte cette cliquez et essaie d'aller à la route additionalSelection et elle provoque une actualisation de la page...

Est-il un moyen de le réparer?

  • Pourriez-vous fournir un plunker?
InformationsquelleAutor dragonfly | 2013-11-12
  1. 155

    La solution est aussi simple que de remplacer href attribut avec de données cible. Qui résout le problème:

    <li><a data-target="#additionalSelection" data-toggle="tab">Additional Selection</a></li>
    • littéralement été coincé sur ce pour l'après-midi ( enfin, c'était essentiellement parce que j'ai confondu le défilement à dire la sélection d'un onglet lol et a été unfruitfully à chercher des solutions à l'aide de $anchorScroll 😛 ). C'est parfait pour BS3, je n'ai pas envie de tirer dans le angulaires-bootstrap-interface utilisateur module juste pour cette! Merci
    • J'ai eu le même problème. La solution a fonctionné. Il a cessé de redirection. Mais la liste n'est pas d'élargir ou de collpase. Quelqu'un peut-il aider?
    • La solution ci-dessus (aussi exactement la même chose Bootstrap, documentation) ne fonctionne que lorsque pas à l'aide Angulaire, au moins pour certaines versions. Je suppose que c'est pourquoi l'angle de gens ont créé cette bibliothèque Angulaire UI Bootstrap comme une solution de contournement pour ces sortes de conflits. N'ont pas étudié pour comprendre exactement le conflit, mais cet article jette un peu de lumière sur éventuellement des conflits liés à grâce à jQuery.
    • En bref, depuis j'ai couru hors de l'espace dans le commentaire ci-dessus, voici un extrait de l'article: "C'est pourquoi nous ne pouvons pas utiliser Bootstrap JavaScript. Il s'appuie sur jQuery et nous ne voulons pas jQuery fouiller dans nos Angulaire des projets. Si nous essayons de lier les variables pour les composants, ça ne marchera pas."
    • J'ai pensé que je pourrais avoir à me casser la tête avec cela, mais un simple correctif. J'ai eu des problèmes à l'aide de bootstrap onglet à côté de routeur de la colonne vertébrale.
    • Vous avez sauvé mon temps.

    InformationsquelleAutor dragonfly
  2. 9

    Comme dragonfly souligné, data-target fonctionne très bien au lieu de href.

    Il y a une petite différence dans le CSS. Lorsque de données cible est utilisé vs href, le curseur n'est pas un pointeur plus. Si vous ne voulez pas d'ajouter du CSS, vous pouvez effectuer les opérations suivantes:

    <a href="#additionalSelection" data-toggle="tab" onclick="return false;">Selection</a>

    C'est juste une suggestion, pas une solution élégante. Mais si vous souhaitez utiliser href pour une raison quelconque, ajouter onclick="return false;"

    InformationsquelleAutor Brian
  3. 3

    Il suffit de remplacer href attribut de data-target

    <li><a data-target="#switchTabs" data-toggle="tab">Tabs</a></li>
    InformationsquelleAutor Rana Pratap Singh
  4. 0

    La solution préservant le curseur (tout en s'appuyant sur les données de la cible au lieu de href de naviguer) est: 

    <li><a href="" data-target="#additionalSelection" data-toggle="tab">Additional Selection</a></li>

    l'ajout d'href cause le curseur pour passer à la main, mais en le laissant vide "" ne cause pas de page est rechargée.

    InformationsquelleAutor Rebecca