href powoduje niezamierzone przeładowanie strony za pomocą Angularjs i Twitter Bootstrap

Question

Pracuję nad projektem wykorzystującym Angularjs i Twitter Bootstrap.

Bootstrap korzysta #, aby przełączać się składniki, takie jak popover, modalnej itp na przykład:

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

Problem jest po kliknięciu na przycisk z takim atrybutem href, powoduje pełne przeładowania strony, co oznacza, wszystko na aktualnej stronie zostało utracone. Czy istnieje sposób, aby temu zapobiec?

niektóre extra info:

kiedy najechaniu na przycisk, adres URL jest dziwne. na przykład url mojego Obecna strona jest

localhost:8080/#/account 

przycisk za href jest

href="#myModal" 

spodziewam się zobaczyć url

localhost:8080/#/account#myModal 

Jednak to, co widzę, to

localhost:8080/#myModal 

Nie jestem pewien, czy to się odnosi d do mojego problemu.

Z góry dzięki!

EDIT 1

widziałem innego stanowiska, że ​​Stewie rozmawialiśmy. Wyjaśnia html5mode i hashbang w angularjs, ale tak naprawdę nie rozwiązuje mojego problemu.

Próbowałem oddanie html5mode i nadal ładuje się strona po kliknięciu na przycisk

Answer 1

hashbang kątowej służy do routing. Spójrz na samouczek, aby dowiedzieć się, jak działa here.

Powinieneś również rzucić okiem na Angular UI Bootstrap.

Zwykły Boostrap nie został zbudowany z myślą o Angular, więc jest kilka rzeczy, które nie są zgodne z Angular. Zespół zdecydował się na przeniesienie Boostrap do dyrektyw Angular, dając ci możliwość pełnego wykorzystania funkcji Angulara ng- (których nie byłbyś w stanie zrobić z prostym zwykłym Boostrap).

---

Ze względu na sposób działania routingu, nie sądzę, by być w stanie robić to, co chcesz, i nie powinno być konieczne.Ponieważ używasz <a> jako przycisk, sprawiają, że regularne przycisk i dodaj ng-click:

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

Jest to droga kątowa (i jak kątowa UI Bootstrap działa).

Wreszcie w kątowej <a> jest dyrektywa docs here, więc jeśli chcesz, aby zapobiec domyślny kliknięcie, zostawić href="":

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

Answer 2

Śmiało & dokonać poniżej zmiany, o oddanie javascript: void (0) zamiast #myModal dla href. Użyj JavaScript, aby aktywować otwarcie modalne, umieszczając wydarzenie kliknięcia.

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

    function openModal(){ 
     $("#myModal").moda(); 
    } 

Answer 3

miałem podobne problemy, pełnego przeładowania strony vs tylko przeglądać przełączanie.

Ponieważ aplikacje kątowe to SAP, aktualizujemy tylko to, co nadejdzie po nazwie hosta/# /.

Wystawiam SuperController, rodzaj kontrolera poziomu aplikacji i jak powiedział Carlos V, można użyć ng-click zamiast href do aktualizacji $location.path().

Oto skrzypce link

nie może być najbardziej optymalnym rozwiązaniem. Mam nadzieję, że to pomoże.

Answer 4

Wynika to z przepisywania linków HTML w języku Angular, wyjaśnił here.

Aby zapobiec przepisywaniu lokalizacji, dodaj target=_self do tych linków ładowania początkowego.

Więc zamiast <a href="#myModal"> trzeba <a href="#myModal" target="_self">

Answer 5

Rozwiązałem: Wystarczy tylko zmienić atrybut href przez atrybut 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>

Answer 6

użyć czegoś takiego w ur js

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

    e.preventDefault(); 
}); 

Tylko upewnij się zrobić dla swojej klasy 'A', w przeciwnym razie będzie to zrobić na wszystkim tych.

Answer 7

Jest prostsze rozwiązanie tutaj: How to prevent redirecting <a href="#something"> in Angular Js1.2

target="_self" Wystarczy dodać do linków