href导致Angularjs和Twitter Bootstrap意外页面重新加载

Question

我正在研究一个使用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很奇怪。例如，我当前页面的网址是

localhost:8080/#/account

该按钮的href为

href="#myModal"

我希望看到网址

localhost:8080/#/account#myModal

但是，我看到的是

localhost:8080/#myModal

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

提前致谢！

编辑1

我看过 Stewie 谈论的另 一篇 文章。它解释了angularjs中的html5mode和hashbang，但并不能真正解决我的问题。

我尝试将html5mode放进去，当我单击按钮时它仍然重新加载页面

Answer 1

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

您还应该看看Angular UI Bootstrap。

常规Boostraprap并不是在考虑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，因此，如果要防止默认单击，请离开href=""：

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