href导致使用Angularjs和Twitter Bootstrap进行意外的页面重新加载

Question

我正在开发一个使用Angularjs和Twitter Bootstrap的项目.

Bootstrap使用#来切换popover,modal等组件,例如:

<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属性的按钮时,它会导致整页重新加载,这意味着当前页面中的所有内容都将丢失. 有办法防止这种情况吗？

一些额外的信息:

当我将鼠标悬停在按钮上时,网址很奇怪.例如,我当前页面的网址是

localhost:8080/#/account

按钮的href是

href="#myModal"

我希望看到网址

localhost:8080/#/account#myModal

但是,我看到的是

localhost:8080/#myModal

我不确定这是否与我的问题有关.

提前致谢!

编辑1

我看过Stewie谈到的另一篇文章.它解释了angularjs中的html5mode和hashbang,但它并没有真正解决我的问题.

我尝试放入html5mode,当我点击按钮时它仍然重新加载页面

Answer 1

这是因为Angular的HTML链接重写,这里解释.

要防止重写位置,请添加target=_self到这些引导链接.

所以不是<a href="#myModal">你需要的<a href="#myModal" target="_self">

Answer 2

Angular中的hashbang用于路由.看看教程更深入了解它是如何工作在这里.

您还应该看一下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>是一个指令文档,所以如果你想阻止默认点击,请保留href="":

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

Answer 3

我解决了：只需更改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>