href 使用 Angularjs 和 Twitter Bootstrap 导致意外页面重新加载 [英] href causes unintended page reload with Angularjs and Twitter Bootstrap

查看：25
本文介绍了href 使用 Angularjs 和 Twitter Bootstrap 导致意外页面重新加载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

Bootstrap 使用 # 来切换组件，例如 popover、modal 等.例如:

<a href="#myModal" role="button" class="btn" data-toggle="modal">启动演示模式</a><!-- 模态--><div id="myModal" class="modal hidefade" 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">模态标头</h3>

<div class="modal-body"><p>一个精致的身体……</p>

<div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button><button class="btn btn-primary">保存更改</button>

问题是当我点击带有此类 href 属性的按钮时，它会导致整个页面重新加载，这意味着当前页面中的所有内容都将丢失.有没有办法防止这种情况发生?

一些额外信息:

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

localhost:8080/#/account

按钮的 href 是

href="#myModal"

我希望看到网址

localhost:8080/#/account#myModal

然而，我看到的是

本地主机:8080/#myModal

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

提前致谢！

编辑 1

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

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

解决方案

Angular 中的 hashbang 用于路由

一>.查看教程以更深入地了解它的工作原理此处.

您还应该查看 Angular UI Bootstrap.

Regular Boostrap 的构建并没有考虑到 Angular，所以很少有不符合 Angular 的东西.因此，团队决定将 Boostrap 移植到 Angular 指令中，让您能够充分使用 Angular 的 ng- 功能(仅使用常规 Boostrap 无法轻松实现).

<小时>

由于路由的工作方式，我认为您无法做您想做的事情，您也不应该这样做.由于您使用 作为按钮，请将其设为常规按钮并添加 ng-click:

这是 Angular 的方式(以及 Angular UI Bootstrap 的工作原理).

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

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

I am working on a project that uses Angularjs and Twitter Bootstrap.

Bootstrap uses # to toggle components such as popover, modal etc. for example:

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

The problem is when I click on button with such href attribute, it causes full page reload, which means, everything in current page is lost. Is there a way to prevent this?

some extra info:

when i hover on the button, the url is weird. for example, my current page's url is

localhost:8080/#/account

the button's href is

href="#myModal"

I expect to see url

localhost:8080/#/account#myModal

However, what I see is 

localhost:8080/#myModal

I am not sure if this is related to my problem.

Thanks in advance!

EDIT 1

I have seen the other post that Stewie talked about. It explains html5mode and hashbang in angularjs, but it doesn't really solve my problem.

I tried putting html5mode, and it still reloads the page when i click on the button

解决方案

The hashbang in Angular is used for routing. Look at the tutorial for a deeper insight into how it works here.

You should also take a look at Angular UI Bootstrap.

Regular Boostrap wasn't built with Angular in mind, so there are few things that aren't in line with Angular. So the team decided to port Boostrap into Angular directives, giving you the ability to fully use Angular's ng- features (which you wouldn't be able to do easily with just regular Boostrap).

Due to the way routing works, I don't think you would be able to do what you want, and you shouldn't need to. Since you're using the <a> as a button, make it a regular button and add an ng-click:

<button class="btn btn-primary" ng-click="openDialog()">Open Dialog</button>

This is the Angular way (and how Angular UI Bootstrap works).

Lastly, in Angular, the <a> is a directive docs here, so if you want to prevent the default click, leave href="":

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

这篇关于href 使用 Angularjs 和 Twitter Bootstrap 导致意外页面重新加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆