href causes involontaires de rechargement de la page avec Angularjs et Twitter Bootstrap

Je suis en train de travailler sur un projet qui utilise Angularjs et Twitter Bootstrap.

Bootstrap utilise # pour activer les composants tels que la liste modale, etc.
par exemple:

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

Le problème est que lorsque je clique sur le bouton avec un tel attribut href, il provoque le rechargement complet de la page, ce qui signifie, tout est dans la page en cours est perdu.
Est-il un moyen pour éviter cela?

certains supplémentaire info:

quand j'ai passez la souris sur le bouton, l'url est bizarre. par exemple, mon url de la page est

localhost:8080/#/account

du bouton href

href="#myModal"

Je m'attends à voir url

localhost:8080/#/account#myModal

Cependant, ce que je vois est 

localhost:8080/#myModal

Je ne sais pas si c'est lié à mon problème.

Merci d'avance!

EDIT 1

J'ai vu l'autre post que Stewie parlé. Il explique html5mode et hashbang dans angularjs, mais il n'a pas vraiment de résoudre mon problème.

J'ai essayé de mettre html5mode, et toujours il recharge la page, quand je clique sur le bouton

  • pourquoi êtes-vous à l'aide d'un <a> lorsque que l'a clairement définis rôle sémantique de l'interne de la navigation de la page? Ce n'est pas un lien vers une ressource, pourquoi ne pas simplement utiliser un <span>?
  • double possible de $emplacement / commutation entre html5 et hashbang mode / lien de réécriture
  • Avez-vous regardé le data-target options ? De cette façon, vous pourriez être en mesure de laisser angulaire de choisir le href.
InformationsquelleAutor user2375809 | 2013-06-22
  1. 10

    La hashbang Angulaire est utilisé pour routage. Regardez le tutoriel pour mieux comprendre comment il fonctionne ici.

    Vous devriez aussi jeter un oeil à Angulaire UI Bootstrap.

    Régulière de Bootstrap n'a pas été construit avec Angulaire en tête, donc il ya peu de choses qui ne sont pas en ligne avec Angulaire. L'équipe a donc décidé de port de Bootstrap dans Angulaire directives, vous donnant la capacité à utiliser pleinement Angulaire du ng- fonctionnalités (qui vous ne seriez pas en mesure de le faire facilement avec juste régulière de Bootstrap).

    Due à la façon dont les travaux de routage, je ne pense pas que vous seriez en mesure de faire ce que vous voulez, et vous ne devriez pas en avoir besoin. Depuis que vous utilisez le <a> comme un bouton, faire un bouton habituel et ajouter un ng-click:

    <button class="btn btn-primary" ng-click="openDialog()">Open Dialog</button>

    C'est l'angle moyen (et comment Angulaire UI Bootstrap fonctionne).

    Enfin, Angulaire, la <a> est une directive docs ici, donc si vous voulez éviter le défaut, cliquez sur, laisser href="":

    <a href="" ng-click="model.$save()">Save</a>
    • Il semble <a href="" ng-click=""> permettra d'éviter la ng-cliquez sur l'opération dans Android 2.3.x navigateur
    InformationsquelleAutor Carlos V
  2. 26

    C'est parce que de lien HTML réécriture de Anguleuses, a expliqué ici.

    Pour éviter la réécriture de l'emplacement, ajouter target=_self à ceux bootstrap liens.

    Ainsi, au lieu de <a href="#myModal"> vous avez besoin <a href="#myModal" target="_self">

    • wow grand conseil ustun! Na pas savoir qui existait
    • merci @ustun vous avez sauvé ma journée.
    • Simple et efficace ! Travailler comme un charme, merci !!
    • ne fonctionne pas :/
    InformationsquelleAutor ustun
  3. 5

    J'ai résolu:
    Il suffit juste de modifier un attribut "HREF" par les DONNÉES de l'attribut CIBLE.

    HTML:

    <div>
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist" id="myTabs">
        <li role="presentation" class="active">
            <a data-target="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>
        </li>
        <li role="presentation">
            <a data-target="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">Tortor Porta Sit</div>
        <div role="tabpanel" class="tab-pane" id="profile">Duis mollis, est non commodo</div>
    </div>
</div>

    • Merci, c'était peut-être la solution la plus simple!
    • Merci, vous avez sauvé mon temps 🙂
    • Fonctionne très bien sur Angulaire 7.
    InformationsquelleAutor jlizanab
  4. 4

    Il y a une solution plus simple ici: Comment éviter la redirection <a href="#quelque chose"> dans Angulaire Js1.2

    Juste ajouter target="_self" à vos liens

    InformationsquelleAutor João Otero
  5. 1

    J'ai eu des problèmes similaires, rechargement complet de la page vs juste de vue de commutation.

    Car Angulaire applications sont des programmes d'ajustement structurel, nous n'mise à jour de tout ce qui vient après le nom d'hôte/#/.

    J'instancie un SuperController, nature de l'application de la commande de niveau et comme Carlos V dit, vous pouvez utiliser ng-click au lieu de href de mettre à jour $location.path().

    Ici un violon lien

    Peut-être pas la solution la plus optimale. Espérons que cela aide.

    InformationsquelleAutor jamiltz
  6. 0

    Utiliser quelque chose comme cela dans ur js

    $('a').on('click',function(e){

    e.preventDefault();
});

    Assurez-vous de faire une classe pour votre " a " sinon vous aurez à faire à une bonne fois pour toutes.

    InformationsquelleAutor Todd B
  7. -9

    Aller de l'avant & faire le dessous de modifier, de mettre javascript:void(0) au lieu de #myModal de href. L'utilisation de Javascript pour déclencher votre modale de l'ouverture, en mettant un événement click.

        <a href="javascript:void(0)" onClick="openModal()" role="button"...

    function openModal(){
      $("#myModal").moda();
    }
    • .... non, juste non. Ne jamais faire cela.
    InformationsquelleAutor Bhaskara Kempaiah