HREF会导致Angularjs和Twitter的引导意想不到的页面重载 [英] href causes unintended page reload with Angularjs and Twitter Bootstrap

问题描述

我正在使用Angularjs和Twitter的引导的一个项目。

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>

问题是，当我点击这样的href属性按钮，它会导致整个页面重新加载，这意味着，在当前页面一切都失去了。
有没有一种方法，以prevent呢？

一些额外的信息：

当我在按钮上悬停，URL是怪异。例如，我的当前页面的网址是

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

localhost:8080/#/account

按钮的href是

the button's href is

href="#myModal"

我希望看到网址

localhost:8080/#/account#myModal

不过，我看到的是

However, what I see is

localhost:8080/#myModal

我不知道这是有关我的问题。

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

在此先感谢！

的 修改1 的

EDIT 1

我见过的其他帖子的Stewie 的津津乐道。它解释了angularjs html5mode和hashbang，但它并没有真正解决我的问题。

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.

我试图把html5mode，当我点击按钮仍然重新加载页面

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

推荐答案

在角的hashbang用于路由。看看教程的深入了解它是如何在这里工作 。

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

您也应该看看角UI引导。

普通自举是没有考虑建角，所以有一些事情是不符合角。因此球队决定端口自举成角指令，使您能够充分利用转角的纳克的能力 - 功能（你将不能够只用普通的自举轻松完成）。

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

由于路由方式的作品，我不认为你将能够做你想做的，你不应该需要。由于您使用的＆LT; A＆GT; 作为一个按钮，使它成为一个常规的按钮，添加一个 NG-点击：

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>

这是角方式（以及如何角UI引导工作）。

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

最后，棱角分明，在＆LT; A＆GT; 是一个指令的文档这里，所以如果你想prevent默认点击，离开 HREF =：

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的引导意想不到的页面重载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！