href causes unintended page reload with Angularjs and Twitter Bootstrap

Question

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

Answer 1

This is because of HTML link rewriting of Angular, explained here.

To prevent rewriting of location, add target=_self to those bootstrap links.

So instead of <a href="#myModal"> you need <a href="#myModal" target="_self">