web-dev-qa-db-ja.com

hrefはAngularjsとTwitterで意図しないページのリロードを引き起こすBootstrap

AngularjsとTwitter Bootstrapを使用するプロジェクトに取り組んでいます。

Bootstrapは＃を使用して、ポップオーバー、モーダルなどのコンポーネントを切り替えます。次に例を示します。

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

問題は、そのようなhref属性を持つボタンをクリックすると、ページ全体が再読み込みされることです。つまり、現在のページのすべてが失われます。 これを防ぐ方法はありますか？

一部追加情報：

ボタンの上にカーソルを合わせると、URLが変になります。たとえば、私の現在のページのURLは

localhost:8080/#/account

ボタンのhrefは

href="#myModal"

URLが表示されることを期待しています

localhost:8080/#/account#myModal

しかし、私が見るのは

localhost:8080/#myModal

これが私の問題に関連しているかどうかはわかりません。

前もって感謝します！

編集1

Stewieが話した他の投稿を見たことがある。 angularjsのhtml5modeとhashbangについて説明していますが、私の問題は実際には解決していません。

私はhtml5modeを入れてみましたが、ボタンをクリックするとページが再読み込みされます

javascripthtmltwitter-bootstrapangularjshref
27
user2375809

Angularのハッシュバンは、 ルーティング に使用されます。それがどのように機能するかについてのより深い洞察については、チュートリアルをご覧ください here 。

Angular UI Bootstrap もご覧ください。

通常のBoostrapはAngularを考慮して構築されていないため、Angularと一致していないものはほとんどありません。そのため、チームはBoostrapをAngularディレクティブに移植し、Angularのng-機能を完全に使用できるようにしました（通常のBoostrapだけでは簡単にはできません）。

ルーティングの仕組みが原因で、私はあなたがあなたが望むことをすることができるとは思いませんし、あなたがする必要はないはずです。 <a>をボタンとして使用しているので、通常のボタンにしてng-clickを追加します。

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

これはAngularの方法です（およびAngular UI Bootstrapのしくみ）。

最後に、Angularでは、<a>はディレクティブ docs here であるため、デフォルトのクリックを防止するには、href=""のままにします。

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

これは、AngularのHTMLリンクの書き換えが原因であると説明されています here が説明されています。

場所の書き換えを防ぐには、これらのbootstrapリンクにtarget=_selfを追加します。

したがって、<a href="#myModal">の代わりに<a href="#myModal" target="_self">が必要です

26
ustun

私は解決しました：DATA-TARGET属性でHREF属性を変更するだけです。

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

ここに簡単な解決策があります： リダイレクトを防ぐ方法<a href="#something"> in Angular Js1.2

リンクにtarget="_self"を追加するだけです

4
João Otero

私は同様の問題を抱えていました、ページ全体のリロードとビューの切り替えだけです。

AngularアプリはSAPであるため、hostname /＃/以降の更新のみを行います。

アプリケーションレベルのコントローラーの一種であるSuperControllerをインスタンス化します。CarlosVが言ったように、hrefの代わりにng-clickを使用して$location.path()を更新できます。

これがフィドルです link

最適なソリューションではない可能性があります。それが役に立てば幸い。

1
jamiltz

あなたのjsでこのようなものを使用してください

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

    e.preventDefault();
});

'a'のクラスを作成することを確認してください。そうしないと、すべてのaに対してクラスが実行されます。

0
Todd B