javascript - Bootstrap 导航栏 #links 正在被 angularjs 更改(或不工作)

Question

我将 bootstrap 与 angularjs 一起使用主要是因为我想使用我的 navbar

我采用了这个模板并添加了 angularJS http://ironsummitmedia.github.io/startbootstrap-landing-page/

这是导航栏

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

下面是带有navbar选项内容的div

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

当我点击 Servicios (#services) 时会带我去

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

而不是带我去

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

在#和服务之间添加了一个/

我安装了 nodejs 并运行 http-server (npm pakckage) 用于测试目的

Answer 1

我找到了解决方案

创建链接时使用两个 ## 和 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>

并在您的 html 元素中使用 id 属性，如下所示:

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

无需更改任何路由或其他任何内容