Html href 使用 Angularjs 和 Twitter Bootstrap 导致意外页面重新加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17251864/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
href causes unintended page reload with Angularjs and Twitter Bootstrap
提问by user2375809
I am working on a project that uses Angularjs and Twitter Bootstrap.
我正在开发一个使用 Angularjs 和 Twitter Bootstrap 的项目。
Bootstrap uses # to toggle components such as popover, modal etc. for example:
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>
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?
问题是当我单击具有此类 href 属性的按钮时，它会导致整个页面重新加载，这意味着当前页面中的所有内容都将丢失。 有没有办法防止这种情况？
some extrainfo:
一些额外的信息：
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 是
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
编辑 1
I have seen the other post that Stewietalked about. It explains html5mode and hashbang in angularjs, but it doesn't really solve my problem.
我看过Stewie谈到的另一篇文章。它解释了 angularjs 中的 html5mode 和 hashbang，但并没有真正解决我的问题。
I tried putting html5mode, and it still reloads the page when i click on the button
我试着把 html5mode，当我点击按钮时它仍然重新加载页面
采纳答案by Carlos V
The hashbang in Angular is used for routing. Look at the tutorial for a deeper insight into how it works here.
Angular 中的 hashbang 用于路由。在此处查看教程以更深入地了解它的工作原理。
You should also take a look at Angular UI Bootstrap.
您还应该看看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).
常规 Boostrap 并没有考虑到 Angular，所以很少有不符合 Angular 的东西。因此，团队决定将 Boostrap 移植到 Angular 指令中，让您能够充分使用 Angular 的ng-功能（仅使用常规 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:
由于路由的工作方式，我认为您无法做您想做的事情，您也不应该这样做。由于您将<a>用作按钮，请将其设为常规按钮并添加ng-click：
<button class="btn btn-primary" ng-click="openDialog()">Open Dialog</button>
This is the Angular way (and how Angular UI Bootstrap works).
这是 Angular 的方式（以及 Angular UI Bootstrap 的工作原理）。
Lastly, in Angular, the <a>is a directive docs here, so if you want to prevent the default click, leave href="":
最后，在 Angular 中，这<a>是一个指令文档here，所以如果你想阻止默认点击，请离开href=""：
<a href="" ng-click="model.$save()">Save</a>
回答by ustun
This is because of HTML link rewriting of Angular, explained here.
这是因为 Angular 的 HTML 链接重写，解释here。
To prevent rewriting of location, add target=_selfto those bootstrap links.
为防止位置重写，请添加target=_self到这些引导链接。
So instead of <a href="#myModal">you need <a href="#myModal" target="_self">
所以，而不是<a href="#myModal">你需要<a href="#myModal" target="_self">
回答by jlizanab
I solved: Simply just change HREF attribute by the DATA-TARGET attribute.
我解决了：只需通过 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>回答by Jo?o Otero
There's a simpler solution here: How to prevent redirecting <a href="#something"> in Angular Js1.2
这里有一个更简单的解决方案：How to prevent redirecting <a href="#something"> in Angular Js1.2
Just add target="_self"to your links
只需添加target="_self"到您的链接
回答by jamiltz
I had similar issues, full page reload vs just view switching.
我有类似的问题，整页重新加载 vs 只是视图切换。
Because Angular apps are SAPs, we only update whatever comes after hostname/#/.
因为 Angular 应用程序是 SAP，所以我们只更新主机名/#/ 之后的内容。
I instantiate a SuperController, kind of the application level controller and like Carlos V said, you can use ng-click instead of href to update $location.path().
我实例化了一个 SuperController，一种应用级控制器，就像 Carlos V 所说的，你可以使用 ng-click 而不是 href 来更新$location.path()。
Here's a fiddle link
这是一个小提琴链接
Might not be the most optimal solution. Hope it helps.
可能不是最佳解决方案。希望能帮助到你。
回答by Todd B
Use something like this in ur js
在你的js中使用这样的东西
$('a').on('click',function(e){
e.preventDefault();
});
Just make sure you make a class for your 'a' otherwise you will do it to all a's.
只要确保你为你的'a'创建了一个类，否则你会对所有的a都这样做。
回答by Bhaskara Kempaiah
Go ahead & make the below change, of putting javascript:void(0) instead of #myModal for href. Use Javascript to trigger your modal opening, by putting a click event.
继续并进行以下更改，将 javascript:void(0) 而不是 #myModal 用于 href。使用 Javascript 通过放置点击事件来触发您的模式打开。
<a href="javascript:void(0)" onClick="openModal()" role="button"...
function openModal(){
$("#myModal").moda();
}
