bootstrap navbar #links are being changed by angularjs (or not working)

Question

I am using bootstrap with angularjs mainly because I want to user partials with my navbar

I have taken this template and added angularJS http://ironsummitmedia.github.io/startbootstrap-landing-page/

Here is the navbar

 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
        <li>
            <a href="#about">Inicio</a>
        </li>
        <li>
            <a href="#services">Servicios</a>
        </li>
        <li>
            <a href="#contact">Contactenos</a>
        </li>
    </ul>
</div>

And below that are the divs with the content of the navbar options

<a  name="services"></a>
<div class="content-section-a">

    <div class="container">
        <div class="row">
            <div class="col-lg-5 col-sm-6">
                <hr class="section-heading-spacer">
                <div class="clearfix"></div>
                <h2 class="section-heading">Death to the Stock Photo:<br>Special Thanks</h2>
                <p class="lead">A special thanks to <a target="_blank" href="http://join.deathtothestockphoto.com/">Death to the Stock Photo</a> for providing the photographs that you see in this template. Visit their website to become a member.</p>
            </div>
            <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                <img class="img-responsive" src="img/ipad.png" alt="">
            </div>
        </div>

    </div>
    <!-- /.container -->

</div>

When I click on the Servicios (#services) is taking me to

http://localhost:8080/index.html#/services

instead of taking me to

http://localhost:8080/index.html#services

a / was added between # and services

I have nodejs installed and running http-server (npm pakckage) for testing purposes

it should be there in your `app.js` or wherever you place..but they can found as `.config` — Pankaj Parkar, Jul 19 '15 at 20:23
@PankajParkar I dont have any .config or app.js (yet) maybe what I am asking is more related to this http://stackoverflow.com/questions/14712223/how-to-handle-anchor-hash-linking-in-angularjs — Mauricio Gracia Gutierrez, Jul 19 '15 at 20:25
Got it..I think you should have refer that answer only which has all you wanted.. — Pankaj Parkar, Jul 19 '15 at 20:28

score 0 · Accepted Answer · answered Jul 19 '15 at 20:37

I found the solution

When creating the links use two ## and the target="_self"

<a href="##faq-1" target="_self">Question 1</a>
<a href="##faq-2" target="_self">Question 2</a>
<a href="##faq-3" target="_self">Question 3</a>

And use the id attribute in your html elements like this:

<div id="faq-1">Section 1</div>
<div id="faq-2">Section 2 Content></div>
<div id="faq-3">Question 3</div>

There is no need to change any routing or anything else

bootstrap navbar #links are being changed by angularjs (or not working)

1 Answers1