2014-09-28 19 views
6

Sto utilizzando le schede JavaScript Bootstrap 3 come documentato, in questo modo:AngularJS in conflitto con le schede Bootstrap

<!-- Nav tabs --> 
<ul class="nav nav-tabs" role="tablist"> 
    <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li> 
    <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li> 
    <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li> 
    <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li> 
</ul> 

<!-- Tab panes --> 
<div class="tab-content"> 
    <div class="tab-pane active" id="home">...</div> 
    <div class="tab-pane" id="profile">...</div> 
    <div class="tab-pane" id="messages">...</div> 
    <div class="tab-pane" id="settings">...</div> 
</div> 

Ma con angolare, che sta cambiando l'URL/#/profile per esempio ..

Come posso evitare questo?

+0

Stai utilizzando il routing di Angular? –

+0

sì, routeProvider –

+2

Domanda laterale: se stai utilizzando Angular e stai anche utilizzando il bootstrap, perché non stai utilizzando il bootstrap angolare (http://angular-ui.github.io/bootstrap/)? – Blaskovicz

risposta

7

A un certo punto, se un collegamento aveva il set di attributi _target, angular non avrebbe intercettato quei clic. Forse funzionerà in questo caso?

+0

Lavorato accetterà risposta in 5 minuti. –

+0

aggiungendo target = "_ self" ha funzionato perfettamente. Grazie –

+0

terribile ma funziona! –

19

Basta inserire l'attributo data-target anziché href e funzionerà senza modificare gli url.

+0

Stavo affrontando un problema simile mentre lavoravo con un tema di wordpress. Stavo usando href per la navigazione a schede usando bootstrap. Questa risposta mi ha aiutato. Ho cambiato href in data-target e ha funzionato la navigazione a schede. Funziona come un incantesimo .. –

+0

Angular stava intercettando gli #hrefs che ho impostato sulle mie schede di navigazione bootstrap. Cambiare l'attributo href in data-target lo ha risolto per me! grazie mgalic! (anche se mi infastidisce un po 'che ora ho i tag senza attributi href:/oh beh) – Jupo

+4

Ottima soluzione. @Jupo: Se vuoi avere gli hrefs in modo che il cursore del mouse abbia lo stile corretto, puoi ancora. Basta impostare un valore vuoto per href e quindi utilizzare il data-target per effettuare la navigazione effettiva. Vedi https://docs.angularjs.org/api/ng/directive/a per maggiori informazioni. – pbuchheit

Problemi correlati