AngularJS中Bootstrap手风琴组件触发页面跳转问题排查

我专门针对AngularJS里Bootstrap Accordion触发页面跳转的问题做了调研，发现两个很有参考性的相关议题：

• 《Bootstrap标签页（data-toggle）在AngularJS中导致页面重载》
• 《AngularJS中使用Bootstrap折叠组件》

这两个议题都指出了核心问题：使用href属性会触发AngularJS的路由机制，导致页面意外跳转/重载。对应的解决方案是将href标签替换为data-target属性，这样就能让Bootstrap的折叠组件正常工作，同时不会触发Angular的路由跳转。

修改前的代码： #

<div class="panel-group" id="accordion1"> 
  <div class="panel panel-default"> 
    <div class="panel-heading"> 
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne"> 
          标题内容
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        折叠面板内容
      </div>
    </div>
  </div>
</div>

修改后的代码： #

<div class="panel-group" id="accordion1"> 
  <div class="panel panel-default"> 
    <div class="panel-heading"> 
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion1" data-target="#collapseOne"> 
          标题内容
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        折叠面板内容
      </div>
    </div>
  </div>
</div>

简单来说，替换后Bootstrap会通过data-target定位到对应的折叠元素，而不会让AngularJS把href的值当成路由路径去处理，完美解决页面跳转的问题。

内容的提问来源于stack exchange，提问作者Alex Sim