it-swarm.com.de

href bewirkt ein unbeabsichtigtes Neuladen von Seiten mit Angularjs und Twitter Bootstrap

Ich arbeite an einem Projekt, das Angularjs und Twitter Bootstrap verwendet.

Bootstrap verwendet #, um Komponenten wie Popover, Modal usw. umzuschalten. Beispiel:

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

Das Problem ist, wenn ich auf die Schaltfläche mit einem solchen href-Attribut klicke, wird die gesamte Seite neu geladen, was bedeutet, dass alles auf der aktuellen Seite verloren geht. Gibt es eine Möglichkeit, dies zu verhindern?

einige extra info:

wenn ich über den Button schwebe, ist die URL seltsam. Die URL meiner aktuellen Seite lautet beispielsweise

localhost:8080/#/account

das href des knopfes ist

href="#myModal"

Ich erwarte eine URL

localhost:8080/#/account#myModal

Was ich jedoch sehe, ist

localhost:8080/#myModal

Ich bin mir nicht sicher, ob dies mit meinem Problem zusammenhängt.

Danke im Voraus!

EDIT 1

Ich habe den anderen Beitrag gesehen, über den Stewie gesprochen hat. Es erklärt html5mode und hashbang in anglejs, aber es löst mein Problem nicht wirklich.

Ich habe versucht, html5mode zu setzen, und es lädt die Seite immer noch neu, wenn ich auf die Schaltfläche klicke

25
user2375809

Der Hashbang in Angular wird für routing verwendet. Sehen Sie sich das Tutorial an, um einen tieferen Einblick in die Funktionsweise von here zu erhalten.

Sie sollten sich auch Angular UI Bootstrap ansehen.

Normales Boostrap wurde nicht für Angular entwickelt, daher gibt es einige Dinge, die nicht mit Angular übereinstimmen. Daher entschied sich das Team, Boostrap in Angular -Anweisungen zu portieren, sodass Sie die ng--Funktionen von Angular vollständig nutzen können (was Sie mit normalem Boostrap nicht ohne weiteres tun könnten). 


Aufgrund der Funktionsweise von Routing glaube ich nicht, dass Sie das tun könnten, was Sie möchten, und Sie sollten es nicht tun. Da Sie den <a> als Button verwenden, machen Sie ihn zu einem regulären Button und fügen Sie einen ng-click hinzu:

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

Dies ist der Angular Weg (und wie Angular UI Bootstrap funktioniert).

In Angular schließlich ist <a> eine Direktive docs here . Wenn Sie den Standardklick verhindern möchten, lassen Sie href="":

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

Dies ist auf das Umschreiben von Angular durch HTML-Links zurückzuführen, das hier hier erläutert wird. 

Fügen Sie den Bootstrap-Links target=_self hinzu, um ein erneutes Schreiben des Speicherorts zu verhindern. 

Statt <a href="#myModal"> brauchen Sie <a href="#myModal" target="_self">

25
ustun

Ich habe gelöst: Ändern Sie einfach das HREF-Attribut durch das DATA-TARGET-Attribut.

<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

Hier gibt es eine einfachere Lösung: So verhindern Sie die Umleitung <a href="#something"> in Angular Js1.2

Fügen Sie einfach target="_self" zu Ihren Links hinzu

3
João Otero

Ich hatte ähnliche Probleme, ganzes Laden der Seite vs.

Da es sich bei Angular -Anwendungen um SAPs handelt, aktualisieren wir nur das, was nach Hostname/#/kommt. 

Ich instanziiere einen SuperController, eine Art Anwendungsebene-Controller, und wie Carlos V sagte, können Sie ng-click anstelle von href verwenden, um $location.path() zu aktualisieren.

Hier ist eine Geige Link

Könnte nicht die optimale Lösung sein. Ich hoffe es hilft.

1
jamiltz

Verwenden Sie so etwas in ur js

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

    e.preventDefault();
});

Stellen Sie einfach sicher, dass Sie eine Klasse für Ihr 'a' erstellen, sonst machen Sie es für alle a's.

0
Todd B