web-dev-qa-db-fra.com

href provoque le rechargement involontaire de pages avec Angularjs et Twitter Bootstrap

Je travaille sur un projet qui utilise Angularjs et Twitter Bootstrap.

Bootstrap utilise # pour basculer entre des composants tels que popover, modal, 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 un bouton avec un tel attribut href, cela provoque un rechargement complet de la page, ce qui signifie que tout le contenu de la page actuelle est perdu . Y a-t-il un moyen d’empêcher cela?

certains extra info:

quand je survole le bouton, l'url est bizarre. Par exemple, l'URL de ma page actuelle est

localhost:8080/#/account

le href du bouton est

href="#myModal"

Je m'attends à voir l'URL

localhost:8080/#/account#myModal

Cependant, ce que je vois est 

localhost:8080/#myModal

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

Merci d'avance!

EDIT 1

J'ai vu l'autre message dont Stewie a parlé. Cela explique html5mode et hashbang dans angularjs, mais cela ne résout pas vraiment mon problème.

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

javascripthtmltwitter-bootstrapangularjshref
25
user2375809

Le hashbang dans Angular est utilisé pour routing . Consultez le didacticiel pour en savoir plus sur son fonctionnement ici .

Vous devriez également jeter un oeil à Angular UI Bootstrap .

Le Boostrap standard n’a pas été conçu dans l’esprit Angular, de sorte qu’il existe peu de choses qui ne correspondent pas à Angular. L’équipe a donc décidé de transférer Boostrap dans les directives Angular, ce qui vous permet d’utiliser pleinement les fonctions ng- d’Anngular (ce que vous ne pourriez pas faire facilement avec un simple Boostrap classique). 

En raison de la manière dont fonctionne le routage, je ne pense pas que vous seriez capable de faire ce que vous voulez et vous ne devriez pas en avoir besoin. Puisque vous utilisez le <a> en tant que bouton, faites-en un bouton normal et ajoutez un ng-click:

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

C’est le chemin Angular (et comment Angular UI Bootstrap fonctionne).

Enfin, dans Angular, le <a> est une directive docs here , donc si vous voulez empêcher le clic par défaut, laissez href="":

<a href="" ng-click="model.$save()">Save</a>
9
Carlos V

Ceci est dû à la réécriture du lien HTML de Angular, a expliqué ici . 

Pour empêcher la réécriture de l'emplacement, ajoutez target=_self à ces liens d'amorçage. 

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

25
ustun

J'ai résolu: Il suffit simplement de modifier l'attribut HREF par l'attribut DATA-TARGET.

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

4
jlizanab

Voici une solution plus simple: Comment empêcher la redirection <a href="#something"> dans Angular Js1.2

Ajoutez simplement target="_self" à vos liens

3
João Otero

J'ai eu des problèmes similaires, le rechargement de la page complète par rapport au changement de vue.

Comme les applications Angular sont des SAP, nous ne mettons à jour que ce qui vient après le nom d'hôte/# /. 

J'instancie un SuperController, sorte de contrôleur de niveau application et, comme l'a dit Carlos V, vous pouvez utiliser ng-click au lieu de href pour mettre à jour $location.path().

Voici un violon link

Pourrait ne pas être la solution la plus optimale. J'espère que ça aide.

1
jamiltz

Utilisez quelque chose comme ceci dans ur js

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

    e.preventDefault();
});

Assurez-vous simplement de faire un cours pour votre 'a' sinon vous le ferez à tous.

0
Todd B