我正在研究一个使用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放进去,当我单击按钮时它仍然重新加载页面
Angular中的hashbang用于路由。看看教程更深入了解它是如何工作在这里。
您还应该看看Angular UI Bootstrap。
常规Boostraprap并不是在考虑Angular的基础上构建的,因此很少有事情与Angular不符。因此,团队决定将Boostrap移植到Angular指令中,从而使您能够完全使用Angular的ng-功能(仅使用常规的Boostrap就无法轻松实现)。
ng-
由于路由的工作方式,我认为您将无法执行所需的操作,并且您也不需要这样做。由于您将<a>用作按钮,因此将其设为常规按钮并添加ng-click:
<a>
ng-click
<button class="btn btn-primary" ng-click="openDialog()">Open Dialog</button>
这是Angular的方式(以及Angular UI Bootstrap的工作方式)。
最后,在Angular中,此处<a>是一个指令docs,因此,如果要防止默认单击,请离开href="":
href=""
<a href="" ng-click="model.$save()">Save</a>