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很奇怪。例如，我的当前页面的URL是

localhost:8080/#/account

按钮的 href 属性为

href="#myModal"

我希望看到URL

localhost:8080/#/account#myModal

然而，我看到的是

localhost:8080/#myModal

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

提前感谢！

编辑1

我已经看到了Stewie提到的其他帖子。它解释了AngularJS中的html5mode和hashbang，但并没有真正解决我的问题。

我尝试使用html5mode，但当我点击按钮时它仍会重新加载页面。

- user2375809

---

为什么要使用<a>标签，它明确定义了在页面内部导航的语义角色？这不是指向资源的链接，为什么不直接使用<span>标签呢？ - Mike 'Pomax' Kamermans

可能是重复的问题：$location / 在HTML5和Hashbang模式之间切换/链接重写 - Stewie

你看过 data-target 选项吗？这样你就可以让 Angular 选择 href。 - Sherbrow

Answer 1

这是由于Angular的HTML链接重写，在这里有解释。

为了防止位置重写，请将target=_self添加到这些引导链接中。

因此，您需要使用<a href="#myModal" target="_self">而不是 <a href="#myModal">。

- ustun

Answer 2

在Angular中，哈希符号用于路由。查看这里的教程，深入了解它的工作原理。

你还应该看一下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>

- Carlos

---

似乎<a href="" ng-click="">会阻止在Android 2.3.x浏览器中进行ng-click操作。 - duckegg

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>

- jlizanab

---

谢谢，这或许是最简单的解决方案！ - firecape

谢谢，你节省了我的时间 :) - Syed Faizan

在 Angular 7 上工作得非常好。 - Tony

Answer 4

这里有一个更简单的解决方案：如何在Angular Js1.2中防止重定向<a href="#something">，只需在您的链接中添加target="_self"。

- João Otero

Answer 5

我遇到了类似的问题，整页重新加载和仅切换视图之间的区别。

因为Angular应用程序是单页面应用程序，我们只更新主机名/＃/后面的内容。

我实例化了一个SuperController，这是一种应用级别的控制器，就像Carlos V所说的那样，您可以使用ng-click而不是href来更新$location.path()。

这里有一个fiddle link。

可能不是最优解决方案。希望能有所帮助。

- jamiltz

Answer 6

在你的 JavaScript 中使用类似这样的代码：

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

    e.preventDefault();
});

请确保为您的“a”创建一个类，否则您将对所有“a”执行此操作。

- Todd B

Answer 7

继续进行以下更改，将javascript:void(0)放在href中，而不是#myModal。使用JavaScript触发模态框的打开，通过添加点击事件。

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

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

- Bhaskara Kempaiah