我正在开发一个使用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属性的按钮时,它会导致整页重新加载,这意味着当前页面中的所有内容都将丢失。 有没有办法阻止这种情况?
一些额外信息:
当我将鼠标悬停在按钮上时,网址很奇怪。例如,我当前页面的网址是
localhost:8080/#/account
按钮的href是
href="#myModal"
我希望看到网址
localhost:8080/#/account#myModal
但是,我看到的是
localhost:8080/#myModal
我不确定这是否与我的问题有关。
提前致谢!
编辑1
我看过 Stewie 谈到的另一篇文章。它解释了angularjs中的html5mode和hashbang,但它并没有真正解决我的问题。
我尝试使用html5mode,当我点击按钮时它仍会重新加载页面
答案 0 :(得分:26)
这是因为Angular的HTML链接重写,解释here。
要防止重写位置,请将target=_self
添加到这些引导链接。
因此,您需要<a href="#myModal">
<a href="#myModal" target="_self">
答案 1 :(得分:10)
Angular中的hashbang用于routing。查看教程,深入了解其工作原理here。
您还应该查看Angular UI Bootstrap。
常规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>
答案 2 :(得分: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>
答案 3 :(得分:4)
这里有一个更简单的解决方案:How to prevent redirecting <a href="#something"> in Angular Js1.2
只需将target="_self"
添加到您的链接
答案 4 :(得分:1)
我有类似的问题,整页重新加载与仅视图切换。
因为Angular应用程序是SAP,我们只更新主机名/#/之后的任何内容。
我实例化一个SuperController,一种应用程序级控制器,就像Carlos V说的那样,你可以使用ng-click而不是href来更新$location.path()
。
这是一个小提琴link
可能不是最佳解决方案。希望它有所帮助。
答案 5 :(得分:0)
在你的js中使用这样的东西
$('a').on('click',function(e){
e.preventDefault();
});
请确保为您的&#39; a&#39;否则你会对所有人都这样做。
答案 6 :(得分:-9)
继续&amp;进行以下更改,将javascript:void(0)代替#myModal用于href。通过点击事件,使用Javascript触发模态打开。
<a href="javascript:void(0)" onClick="openModal()" role="button"...
function openModal(){
$("#myModal").moda();
}