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

Posted 2023-02-19

【中文标题】href 导致使用 Angularjs 和 Twitter Bootstrap 意外重新加载页面

【英文标题】：href causes unintended page reload with Angularjs and Twitter Bootstrap

【发布时间】：2013-06-19 13:35:14

【问题描述】：

我正在开发一个使用 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，当我点击按钮时它仍然重新加载页面

【问题讨论】：

当<a> 具有明确定义的内部导航页面语义角色时，您为什么要使用它？这不是资源链接，为什么不直接使用<span>？

$location / switching between html5 and hashbang mode / link rewriting 的可能重复项

您查看过data-target 选项吗？这样你就可以让角度选择href。

【参考方案1】：

继续并进行以下更改，将 javascript:void(0) 代替 #myModal 用于 href。使用 Javascript 通过点击事件触发您的模式打开。

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

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

【参考方案2】：

Angular 中的 hashbang 用于routing。查看教程以更深入地了解其工作原理here。

你也应该看看Angular UI Bootstrap。

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

【讨论】：

看来 会阻止 android 2.3.x 浏览器中的 ng-click 操作

【参考方案3】：

我有类似的问题，全页重新加载与仅查看切换。

因为 Angular 应用程序是 SAP，我们只更新主机名/#/ 之后的内容。

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

这是一个小提琴link

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

【参考方案4】：

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

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

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

【参考方案5】：

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

【讨论】：

谢谢，这可能是最简单的解决方案！

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

在 Angular 7 上运行良好。

【参考方案6】：

在你的 js 中使用类似的东西

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

    e.preventDefault();
);

只要确保你为你的“a”上课，否则你会为所有的a做。

【参考方案7】：

这里有一个更简单的解决方案：How to prevent redirecting <a href="#something"> in Angular Js1.2

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