href导致使用Angularjs和Twitter引导程序意外重新加载页面

href causes unintended page reload with Angularjs and Twitter Bootstrap

本文关键字：新加载 加载 意外 引导程序 Angularjs Twitter href      更新时间：2023-09-26

我正在做一个使用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属性的按钮时，会导致整个页面重新加载，这意味着当前页面中的所有内容都会丢失。有办法防止这种情况发生吗

一些额外信息：

当我把鼠标悬停在按钮上时，url很奇怪。例如，我当前页面的url是

localhost:8080/#/account

按钮的href是

href="#myModal"

我希望看到url

localhost:8080/#/account#myModal

然而，我看到的是

localhost:8080/#myModal

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

提前感谢！

编辑1

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

我试着放置html5mode，当我点击按钮

时，它仍然会重新加载页面

这是因为Angular的HTML链接重写，在这里解释。

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

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

Angular中的hashbang用于路由。请参阅教程，以更深入地了解它是如何在这里工作的。

您还应该看看Angular UI引导程序。

常规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引导程序的工作方式）。

最后，在Angular中，<a>在这里是一个指令文档，所以如果你想阻止默认的点击，请保留href="":

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

我解决了：只需通过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>

这里有一个更简单的解决方案：如何防止重定向<a href="某事">在Angular Js1.2 中

只需将target="_self"添加到您的链接

我也遇到过类似的问题，全页重载与视图切换。

因为Angular应用程序是SAP，所以我们只更新hostname/#/之后的内容。

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

这是一个小提琴链接

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

在ur js 中使用类似的东西

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

只要确保你为你的"a"做了一节课，否则你会对所有的"a’"都做。

继续&进行以下更改，将javascript:void（0）代替#myModal用于href。使用Javascript通过放置点击事件来触发模式打开。

    <a href="javascript:void(0)" onClick="openModal()" role="button"...
    function openModal(){
      $("#myModal").moda();
    }
相关文章：